/* ============================================================
   CompanyCard — Homepage cinematic layer (home.css)
   Loaded only on index.html, on top of styles.css
   ============================================================ */

/* ---------- Entrance: staggered fade-up ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fx { opacity:0; animation: fadeUp .9s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: var(--d, 0s); }

/* ---------- Animated gradient text ---------- */
.gtext-anim {
  background: linear-gradient(90deg,#6366F1,#8B5CF6,#A855F7,#8B5CF6,#6366F1);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: 300% center; } }

/* ---------- HERO with animated mesh ---------- */
.hero-x {
  position: relative; isolation: isolate; overflow: clip;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.hero-x .mesh { position:absolute; inset:-25%; z-index:-2; pointer-events:none; filter: blur(64px); }
.hero-x .blob { position:absolute; border-radius:50%; opacity:.55; }
.blob.b1 { width:48vw; max-width:620px; aspect-ratio:1; background:#6366F1; top:-8%; left:2%;  animation: drift1 19s ease-in-out infinite; }
.blob.b2 { width:42vw; max-width:560px; aspect-ratio:1; background:#A855F7; top:-2%; right:0%;  animation: drift2 23s ease-in-out infinite; }
.blob.b3 { width:40vw; max-width:520px; aspect-ratio:1; background:#8B5CF6; bottom:-18%; left:28%; animation: drift3 27s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8%,12%) scale(1.12);} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-10%,8%) scale(1.08);} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6%,-10%) scale(1.15);} }
.hero-x .grid-overlay {
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image: linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 72%);
}

/* shimmering eyebrow */
.eyebrow.live { position:relative; overflow:hidden; }
.eyebrow.live .dot { animation: pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{ box-shadow:0 0 0 0 rgba(139,92,246,.55);} 50%{ box-shadow:0 0 0 6px rgba(139,92,246,0);} }

/* ---------- Buttons: shine sweep + glow ---------- */
.btn.shine { position:relative; overflow:hidden; }
.btn.shine::after {
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition:none;
}
.btn.shine:hover::after { animation: sweep .85s ease; }
@keyframes sweep { to { left:140%; } }
.btn.glow { box-shadow: 0 12px 30px rgba(124,77,246,.35); }
.btn.glow:hover { box-shadow: 0 18px 46px rgba(124,77,246,.5); }

/* ---------- 3D tilt stage ---------- */
.stage3d { perspective: 1300px; position: relative; }
.tilt3d {
  position: relative; transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.tilt3d .depth { transform: translateZ(var(--z, 0px)); transform-style: preserve-3d; }

/* phone glow base */
.stage3d .glow-base {
  position:absolute; left:50%; top:50%; width:74%; aspect-ratio:1; transform:translate(-50%,-50%);
  background: var(--grad); filter: blur(58px); opacity:.4; border-radius:50%; z-index:0;
  animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100%{opacity:.32; transform:translate(-50%,-50%) scale(1);} 50%{opacity:.5; transform:translate(-50%,-50%) scale(1.08);} }

/* floating chips */
.chip {
  position:absolute; z-index:5; display:flex; align-items:center; gap:9px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.7); box-shadow: var(--shadow);
  padding:10px 14px; border-radius: 14px; font-weight:600; font-size:.84rem; color:var(--ink);
  white-space:nowrap;
}
.chip .ic { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:#fff; }
.chip .ic svg { width:16px; height:16px; }
.chip .ic.i { background: linear-gradient(135deg,#6366F1,#8B5CF6); }
.chip .ic.v { background: linear-gradient(135deg,#8B5CF6,#A855F7); }
.chip .ic.g { background: linear-gradient(135deg,#22C55E,#16A34A); }
.chip .ic.o { background: linear-gradient(135deg,#F59E0B,#F97316); }
.chip.c1 { top:8%;  left:-6%;  animation: bob 5.2s ease-in-out infinite; }
.chip.c2 { top:30%; right:-10%; animation: bob 6.1s ease-in-out infinite .4s; }
.chip.c3 { bottom:20%; left:-12%; animation: bob 5.6s ease-in-out infinite .8s; }
.chip.c4 { bottom:4%; right:-4%;  animation: bob 6.6s ease-in-out infinite .2s; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

/* Pulse rings around tap pill */
.tap-pill .ico { position:relative; }
.tap-pill .ico::before, .tap-pill .ico::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(139,92,246,.6); animation: ring 2.2s ease-out infinite;
}
.tap-pill .ico::after { animation-delay: 1.1s; }
@keyframes ring { 0%{ transform:scale(1); opacity:.8;} 100%{ transform:scale(2.4); opacity:0;} }

/* typing caret */
.type-caret::after { content:"|"; margin-left:1px; color:var(--indigo-500); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }

/* ---------- Infinite marquee ---------- */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                              mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display:flex; align-items:center; gap:56px; width:max-content; animation: scrollx 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--slate-300); letter-spacing:-.02em; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.marquee.rev .marquee-track { animation-direction: reverse; }

/* ---------- 3D floating-card showcase ---------- */
.showcase { position:relative; min-height: 480px; perspective: 1400px; }
.showcase-inner { position:relative; height: 480px; transform-style: preserve-3d; }
.float-card {
  position:absolute; width: 230px; border-radius: 26px; overflow:hidden;
  background:#fff; box-shadow: var(--shadow-lg); border:1px solid rgba(255,255,255,.6);
  will-change: transform;
}
.float-card .fc-cover { height:64px; background: var(--grad); }
.float-card .fc-cover.alt1 { background: linear-gradient(135deg,#0EA5E9,#6366F1); }
.float-card .fc-cover.alt2 { background: linear-gradient(135deg,#F43F5E,#A855F7); }
.float-card .fc-cover.alt3 { background: linear-gradient(135deg,#10B981,#0EA5E9); }
.float-card .fc-av { width:54px; height:54px; border-radius:16px; margin:-27px auto 0; border:3px solid #fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:#fff; background:var(--grad); position:relative; }
.float-card .fc-b { padding:8px 16px 18px; text-align:center; }
.float-card .fc-b b { color:var(--ink); display:block; font-size:.98rem; }
.float-card .fc-b span { color:var(--slate-500); font-size:.8rem; }
.float-card .fc-dots { display:flex; gap:7px; justify-content:center; margin-top:12px; }
.float-card .fc-dots i { width:30px; height:30px; border-radius:9px; background:var(--slate-100); display:block; }
.showcase .fa { top:60px;  left:6%;   transform: rotateY(20deg) rotateX(8deg) translateZ(-40px); z-index:1; }
.showcase .fb { top:18px;  left:50%;  margin-left:-115px; transform: rotateY(0deg) translateZ(40px); z-index:3; }
.showcase .fc3{ top:80px;  right:6%;  transform: rotateY(-20deg) rotateX(8deg) translateZ(-40px); z-index:1; }
.showcase .fd { bottom:0;  left:24%;  transform: rotateY(10deg) translateZ(-10px) scale(.92); z-index:2; opacity:.96; }
.showcase .fe { bottom:8px; right:22%; transform: rotateY(-10deg) translateZ(-10px) scale(.92); z-index:2; opacity:.96; }

/* ---------- Tilt-on-hover utility cards ---------- */
.hov3d { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; transform-style:preserve-3d; will-change:transform; }

/* ---------- Animated how-it-works phone ---------- */
.demo-steps { display:flex; gap:12px; flex-direction:column; }
.demo-step-btn { text-align:left; padding:18px 20px; border-radius:16px; border:1px solid var(--slate-200); background:#fff; transition:.25s; cursor:pointer; }
.demo-step-btn.active { border-color:var(--indigo-400, #818cf8); box-shadow: var(--shadow); background:linear-gradient(180deg,#fff, #fbfaff); }
.demo-step-btn .row { display:flex; align-items:center; gap:12px; }
.demo-step-btn .n { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;background:var(--slate-300); transition:.25s; flex:0 0 auto;}
.demo-step-btn.active .n { background:var(--grad); }
.demo-step-btn b { color:var(--ink); }
.demo-step-btn p { font-size:.92rem; margin-top:6px; }
.demo-step-btn .bar { height:3px; border-radius:3px; background:var(--slate-100); margin-top:14px; overflow:hidden; }
.demo-step-btn .bar i { display:block; height:100%; width:0; background:var(--grad); }
.demo-step-btn.active .bar i { animation: fill 5s linear forwards; }
@keyframes fill { to { width:100%; } }
.demo-screens { position:relative; }
.demo-screen { position:absolute; inset:0; opacity:0; transform:translateY(14px) scale(.98); transition:.5s cubic-bezier(.2,.7,.2,1); }
.demo-screen.active { opacity:1; transform:none; position:relative; }

/* ---------- Scroll cue ---------- */
.scroll-cue { display:flex; justify-content:center; margin-top:30px; }
.scroll-cue span { width:26px; height:42px; border:2px solid var(--slate-300); border-radius:14px; position:relative; }
.scroll-cue span::after { content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--indigo-500); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%{ transform:translateY(0); opacity:1;} 60%{ transform:translateY(12px); opacity:0;} 100%{opacity:0;} }

/* hero canvas */
#hero-canvas { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .chip.c1{left:0;} .chip.c2{right:0;} .chip.c3{left:0;} .chip.c4{right:0;}
  .showcase .fa,.showcase .fc3{ display:none; }
  .showcase .fb{ left:50%; }
}
@media (max-width: 720px) {
  .chip { display:none; }
  .showcase-inner { height:420px; }
  .float-card { width:190px; }
  .showcase .fd,.showcase .fe{ display:none; }
}

/* ============================================================
   Liquid Glass system (ui-ux-pro-max recommendation) + product reels
   ============================================================ */
.glass {
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 34px rgba(31,27,75,.12), inset 0 1px 0 rgba(255,255,255,.65);
}

/* ---- "See it in action" video band ---- */
.action-band { position: relative; overflow: clip; background: linear-gradient(160deg,#EEF2FF 0%, #F5F3FF 60%, #ffffff 100%); }
.action-band::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(560px 320px at 88% 6%, rgba(168,85,247,.16), transparent 60%),
              radial-gradient(540px 320px at 6% 90%, rgba(99,102,241,.16), transparent 60%);
}
.action-band > .container { position: relative; z-index: 1; }
.reel-wrap { position: relative; display: grid; place-items: center; }
.reel-glow { position:absolute; inset: 6% 14%; background: var(--grad); filter: blur(60px); opacity:.30; border-radius: 48px; z-index:0; animation: pulseGlow 5s ease-in-out infinite; }
.reel-frame {
  position: relative; z-index: 1; max-width: 326px; width: 100%;
  border-radius: 30px; overflow: hidden; background:#0b0a1f;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.5);
}
.reel-frame video { display:block; width:100%; height:auto; }
.reel-tag {
  position:absolute; z-index:2; left:14px; top:14px;
  display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius: var(--r-full);
  background: rgba(11,10,31,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color:#fff; font-size:.74rem; font-weight:600;
}
.reel-tag .pd { width:8px; height:8px; border-radius:50%; background:#f43f5e; animation: livePulse 1.6s infinite; }

/* ---- Live team dashboard reel (pure CSS screen-recording) ---- */
.dash { border-radius: 20px; overflow: hidden; background:#fff; border:1px solid var(--slate-200); box-shadow: var(--shadow-lg); }
.dash-top { background: var(--grad-ink); padding: 13px 16px; display:flex; align-items:center; gap:8px; }
.dash-top .dots { display:flex; gap:6px; }
.dash-top .dots i { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.28); }
.dash-top b { color:#fff; font-family: var(--font-display); font-size:.92rem; margin-left:6px; }
.dash-top .live { margin-left:auto; display:flex; align-items:center; gap:7px; color:#86efac; font-size:.8rem; font-weight:600; }
.dash-top .live .pd { width:8px; height:8px; border-radius:50%; background:#22c55e; animation: livePulse 1.6s infinite; }
@keyframes livePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.55);} 50%{ box-shadow:0 0 0 7px rgba(34,197,94,0);} }
.dash-body { padding: 18px; }
.dash-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 14px; }
.dash-tile { background: var(--slate-50); border-radius: 14px; padding: 13px 14px; }
.dash-tile .k { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height:1; }
.dash-tile .l { color: var(--slate-500); font-size: .78rem; margin-top: 4px; }
.dash-chart { display:flex; align-items:flex-end; gap: 9px; height: 120px; padding: 12px; background: var(--slate-50); border-radius: 14px; }
.dash-chart i { flex:1; background: var(--grad); border-radius: 6px 6px 0 0; transform: scaleY(.15); transform-origin: bottom; animation: barGrow 5s ease-in-out infinite; }
@keyframes barGrow { 0%{ transform: scaleY(.12);} 42%{ transform: scaleY(var(--h,1));} 82%{ transform: scaleY(var(--h,1));} 100%{ transform: scaleY(.12);} }
.dash-rows { margin-top: 14px; display:grid; gap: 10px; }
.dash-row { display:flex; align-items:center; gap: 10px; opacity:0; animation: rowIn 5s ease infinite; }
@keyframes rowIn { 0%{ opacity:0; transform: translateY(9px);} 12%{ opacity:1; transform:none;} 86%{ opacity:1;} 100%{ opacity:0; transform: translateY(-4px);} }

/* ---- Design-your-card reel (liquid colour morph) ---- */
.design-card { position:relative; max-width: 300px; margin-inline:auto; border-radius: 24px; overflow:hidden; background:#fff; box-shadow: var(--shadow-lg); border:1px solid rgba(255,255,255,.6); }
.design-card .dc2-cover { height: 104px; background: var(--grad); animation: hueMorph 9s linear infinite; }
@keyframes hueMorph { to { filter: hue-rotate(360deg); } }
.design-card .dc2-av { width: 72px; height: 72px; border-radius: 20px; margin: -36px auto 0; border:4px solid #fff; background: var(--grad); animation: hueMorph 9s linear infinite; position:relative; z-index:2; }
.design-card .dc2-body { padding: 10px 20px 20px; text-align:center; }
.design-card .dc2-name { font-family: var(--font-display); font-weight:700; color: var(--ink); font-size:1.1rem; }
.design-card .dc2-role { color: var(--slate-500); font-size:.85rem; margin-bottom: 14px; }
.design-card .dc2-links { display:grid; gap: 9px; }
.design-card .link-chip { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background: var(--slate-50); opacity:0; animation: chipPop 6s ease infinite; }
.design-card .link-chip i { width:24px; height:24px; border-radius:7px; background: var(--grad); display:block; flex:0 0 auto; }
.design-card .link-chip span { height:8px; border-radius:5px; background: var(--slate-200); flex:1; }
@keyframes chipPop { 0%{ opacity:0; transform: scale(.85) translateY(6px);} 12%{ opacity:1; transform:none;} 88%{ opacity:1;} 100%{ opacity:0; } }

@media (max-width: 720px) {
  .reel-glow { inset: 10% 18%; }
}

/* ---- square product clip frame (real video) ---- */
.clip-square {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5);
}
.clip-square video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Cinematic brand-film band (real footage, full-bleed)
   ============================================================ */
.film-band { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.film-band .bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.film-band .scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,7,22,.86) 0%, rgba(8,7,22,.6) 42%, rgba(8,7,22,.12) 100%); }
.film-band > .container { position: relative; z-index: 2; }
.film-band h2 { color: #fff; max-width: 640px; }
.film-band p { color: rgba(255,255,255,.86); max-width: 540px; margin-top: 18px; font-size: 1.16rem; }
.badge-film { display: inline-flex; align-items: center; gap: 8px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: 7px 14px; border-radius: var(--r-full); font-size: .8rem; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.badge-film .pd { width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; animation: livePulse 1.6s infinite; }

/* ============================================================
   Blinq-style colourful feature gallery
   ============================================================ */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gtile { position: relative; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.gtile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gtile.span2 { grid-column: span 2; }
.gtile .media { position: relative; min-height: 232px; flex: 1; display: grid; place-items: center;
  padding: 26px; overflow: hidden; }
.gtile.novid .media { padding: 0; }
.gtile .media.bg-blue  { background: #BCDEF0; }
.gtile .media.bg-pink  { background: #F6C9DD; }
.gtile .media.bg-tan   { background: #E7E0CD; }
.gtile .media.bg-olive { background: #CCD2A4; }
.gtile .media.bg-lav   { background: #E0D9F4; }
.gtile .media.bg-gray  { background: #D9D7D0; }
.gtile .foot { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.gtile .foot b { font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); font-weight: 700; display: block; }
.gtile .foot p { font-size: .86rem; margin-top: 2px; color: var(--slate-500); }
.gtile .arrow { width: 38px; height: 38px; border-radius: 50%; background: var(--slate-100);
  display: grid; place-items: center; color: var(--ink); flex: 0 0 auto; transition: .2s; }
.gtile .arrow svg { width: 17px; height: 17px; }
.gtile:hover .arrow { background: var(--grad); color: #fff; }
.gtile .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* CTA tile */
.gtile.cta { background: #F5654A; justify-content: center; }
.gtile.cta .cta-in { padding: 32px; }
.gtile.cta h3 { color: #fff; font-size: 1.9rem; line-height: 1.05; }
.gtile.cta .arrow { background: #fff; color: var(--ink); margin-top: 20px; }
.gtile.cta:hover .arrow { background: #fff; }

/* mini mockups inside tiles */
.mk { background: #fff; border-radius: 16px; box-shadow: 0 14px 34px rgba(15,23,42,.16); overflow: hidden; }
.mk-qr { width: 188px; padding: 14px; text-align: center; }
.mk-qr .q { width: 120px; height: 120px; margin: 0 auto 10px; }
.mk-qr .who { display: flex; align-items: center; gap: 8px; justify-content: center; }
.mk-qr .pf { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .72rem; }
.mk-qr b { color: var(--ink); font-size: .9rem; }
.vcall { width: 100%; max-width: 400px; aspect-ratio: 16/9; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(115deg, #1A1814 0%, #3A3226 55%, #C6A15B 130%); box-shadow: var(--shadow-lg); }
.vcall .brandmark { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 7px;
  color: #F5F2EC; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .03em; opacity: .92; }
.vcall .brandmark i { width: 16px; height: 12px; border: 1.6px solid #C6A15B; border-radius: 3px; display: block; }
.vcall .person { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 130px; height: 92px;
  border-radius: 54px 54px 0 0; background: linear-gradient(180deg, #93A0B4, #5C677D); }
.vcall .person::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 50px; border-radius: 50%; background: #C6CFDE; }
.vcall .tag { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.5); color: #fff;
  font-size: .64rem; font-weight: 600; padding: 5px 9px; border-radius: 8px; backdrop-filter: blur(4px); }
.vcall .bar { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.vcall .bar span { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.22); display: block; }
.vcall .bar span.end { background: #DC5A50; }
.stat-mini { width: 230px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
.stat-mini .row { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.stat-mini .row .up { color: #16A34A; }
.stat-mini .bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; }
.stat-mini .bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--slate-200); display: block; }
.stat-mini .bars i.hi { background: var(--grad); }
.sig { width: 250px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 14px; display: flex; gap: 12px; align-items: center; }
.sig .pf { width: 52px; height: 52px; border-radius: 10px; background: var(--grad); flex: 0 0 auto; }
.sig .ln { height: 8px; border-radius: 5px; background: var(--slate-200); margin: 5px 0; }
.wallet-card { width: 226px; border-radius: 16px; color: #fff; padding: 16px 18px;
  background: linear-gradient(160deg, #2b2840, #0b0a1f); box-shadow: var(--shadow-lg); }
.wallet-card .row { display: flex; align-items: center; justify-content: space-between; }
.watch { width: 128px; height: 156px; border-radius: 36px; background: linear-gradient(160deg, #26233f, #0b0a1f); padding: 11px; box-shadow: var(--shadow-lg); }
.watch .scr { width: 100%; height: 100%; border-radius: 26px; background: #fff; display: grid; place-items: center; }
.watch .scr .q { width: 74px; height: 74px; }
.callbox { width: 100%; max-width: 244px; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; position: relative;
  background: radial-gradient(120% 120% at 70% 30%, #6366F1, #1b1930); box-shadow: var(--shadow); }
.callbox .person { position: absolute; right: 14px; bottom: 0; width: 96px; height: 86px; border-radius: 40px 40px 0 0;
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.5)); }
.callbox .ov { position: absolute; left: 12px; top: 12px; background: #fff; border-radius: 9px; padding: 7px 9px; box-shadow: var(--shadow-sm); font-size: .68rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.callbox .ov i { width: 16px; height: 16px; border-radius: 4px; background: var(--grad); display: block; }

@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, 1fr); } .gtile.span2 { grid-column: span 2; } .film-band { min-height: 460px; } }
@media (max-width: 620px) { .gallery { grid-template-columns: 1fr; } .gtile.span2 { grid-column: span 1; } .film-band .scrim { background: linear-gradient(180deg, rgba(8,7,22,.55), rgba(8,7,22,.85)); } }

/* ============================================================
   Original animated card EDITOR (replaces 3rd-party demo clip)
   ============================================================ */
.editor { position: relative; max-width: 384px; margin-inline: auto; background: var(--violet-50);
  border-radius: 28px; padding: 26px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.5); overflow: hidden; }
.editor .reel-tag { position: absolute; z-index: 7; left: 14px; top: 14px; }
.ed-card { position: relative; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.ed-cover { height: 98px; background: var(--grad); transition: background .6s ease; }
.ed-cover.t0 { background: linear-gradient(135deg,#6366F1,#8B5CF6,#A855F7); }
.ed-cover.t1 { background: linear-gradient(135deg,#8B5CF6,#A855F7); }
.ed-cover.t2 { background: linear-gradient(135deg,#0EA5E9,#14B8A6); }
.ed-cover.t3 { background: linear-gradient(135deg,#F43F5E,#A855F7); }
.ed-cover.t4 { background: linear-gradient(135deg,#F59E0B,#F43F5E); }
.ed-av { width: 64px; height: 64px; border-radius: 18px; margin: -32px auto 0; border: 4px solid #fff;
  background: var(--grad); color: #fff; display: grid; place-items: center; position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.ed-info { padding: 8px 18px 18px; text-align: center; }
.ed-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.15rem; }
.ed-role { color: var(--slate-500); font-size: .86rem; margin-bottom: 14px; }
.ed-links { display: grid; gap: 8px; }
.ed-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: var(--slate-50);
  opacity: 0; transform: translateY(9px); transition: opacity .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.ed-link.in { opacity: 1; transform: none; }
.ed-link i { width: 22px; height: 22px; border-radius: 6px; background: var(--grad); flex: 0 0 auto; }
.ed-link b { font-weight: 600; font-size: .86rem; color: var(--ink); }
.ed-swatches { display: flex; gap: 11px; justify-content: center; margin-top: 18px; }
.ed-swatches .sw { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; transition: transform .25s, box-shadow .25s; }
.ed-swatches .sw.active { transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.ed-swatches .s0 { background: linear-gradient(135deg,#6366F1,#A855F7); }
.ed-swatches .s1 { background: #8B5CF6; }
.ed-swatches .s2 { background: #14B8A6; }
.ed-swatches .s3 { background: #F43F5E; }
.ed-swatches .s4 { background: #F59E0B; }
.ed-photocue { position: absolute; top: 84px; left: 50%; transform: translateX(-50%) translateY(-6px);
  background: var(--ink); color: #fff; font-size: .78rem; font-weight: 600; padding: 7px 12px; border-radius: 10px;
  display: flex; align-items: center; gap: 7px; opacity: 0; transition: .3s; z-index: 6; white-space: nowrap; }
.ed-photocue svg { width: 14px; height: 14px; }
.ed-photocue.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ed-toast { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(12px);
  background: #ECFDF5; color: #15803D; font-weight: 600; font-size: .85rem; padding: 9px 16px; border-radius: var(--r-full);
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; opacity: 0; transition: .35s; z-index: 8; }
.ed-toast svg { width: 16px; height: 16px; }
.ed-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Original cinematic brand band (our cards, no 3rd-party footage)
   ============================================================ */
.cine-band { position: relative; overflow: hidden; background: var(--grad-ink); min-height: 560px; display: flex; align-items: center; }
.cine-band .cine-glow { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(620px 360px at 82% 12%, rgba(168,85,247,.38), transparent 60%),
              radial-gradient(560px 340px at 4% 92%, rgba(99,102,241,.34), transparent 60%); }
.cine-band .cine-grid { position: absolute; inset: 0; z-index: 0; opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(circle at 70% 40%, #000, transparent 75%); }
.cine-cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cine-cards .float-card { position: absolute; animation: drift 12s ease-in-out infinite; box-shadow: var(--shadow-lg); }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-18px) rotate(var(--r,0deg)); } }
.cine-band .scrim { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(8,7,22,.78) 0%, rgba(8,7,22,.45) 48%, rgba(8,7,22,.05) 100%); }
.cine-band > .container { position: relative; z-index: 3; }
.cine-band h2 { color: #fff; max-width: 620px; }
.cine-band p { color: rgba(255,255,255,.86); max-width: 520px; margin-top: 18px; font-size: 1.16rem; }

@media (max-width: 900px) {
  .cine-cards .float-card { display: none; }
  .cine-cards .float-card.keep { display: block; }
}
@media (max-width: 620px) {
  .cine-cards { display: none; }
  .cine-band .scrim { background: linear-gradient(180deg, rgba(8,7,22,.5), rgba(8,7,22,.82)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx { animation: fadeIn .01s linear forwards; }
  .blob, .gtext-anim, .marquee-track, .chip, .glow-base, .tap-pill .ico::before, .tap-pill .ico::after,
  .scroll-cue span::after, .eyebrow.live .dot, .demo-step-btn.active .bar i,
  .reel-glow, .reel-tag .pd, .dash-top .live .pd, .dash-chart i, .dash-row,
  .design-card .dc2-cover, .design-card .dc2-av, .design-card .link-chip,
  .cine-cards .float-card {
    animation: none !important;
  }
  .cine-cards .float-card { transform: rotate(var(--r,0deg)) !important; }
  .dash-chart i { transform: scaleY(var(--h,1)) !important; }
  .dash-row, .design-card .link-chip { opacity: 1 !important; }
  .tilt3d { transition: none !important; }
}

/* ============================================================
   V2 HERO + HOME POLISH — ui-ux-pro-max bold upgrade
   ============================================================ */

/* Cinematic aurora spotlight behind the hero (static, GPU-cheap) */
.hero-x::before {
  content: ""; position: absolute; inset: -12% -10% auto -10%; height: 82%; z-index: -2;
  background:
    radial-gradient(58% 60% at 50% 0%, rgba(139,92,246,.20), transparent 70%),
    radial-gradient(42% 52% at 84% 4%, rgba(99,102,241,.18), transparent 70%),
    radial-gradient(42% 52% at 12% 10%, rgba(168,85,247,.16), transparent 70%);
  pointer-events: none;
}

/* Richer animated gradient headline.
   NOTE: the `background` shorthand resets background-clip, so we must
   re-assert clip + transparent fill here or the text renders as a solid block. */
.gtext-anim {
  background: linear-gradient(90deg, #6366F1, #8B5CF6, #A855F7, #C084FC, #8B5CF6, #6366F1);
  background-size: 320% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Builder: real elevated glass surface */
.builder {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* Floating chips: crisper glass + soft inner light */
.chip { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.85); }

/* Gallery tiles: hairline border + spring arrow */
.gtile { border: 1px solid rgba(15,23,42,.05); }
.gtile .arrow { transition: background var(--t) ease, color var(--t) ease, transform var(--t) var(--ease-spring); }
.gtile:hover .arrow { transform: translateX(3px) scale(1.08); }

/* Marquee logos: brighten on hover */
.marquee-track span { transition: color var(--t) ease; }
.marquee:hover .marquee-track span { color: var(--slate-400); }

/* Demo steps: lift + spring */
.demo-step-btn { transition: border-color var(--t) ease, box-shadow var(--t) ease, background var(--t) ease, transform var(--t) var(--ease-spring); }
.demo-step-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Editor reel: premium frame */
.editor { box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) {
  .gtile .arrow, .demo-step-btn { transition: none !important; }
  .gtile:hover .arrow, .demo-step-btn:hover { transform: none !important; }
}