/* Utility for hero heading to force black text */
.hero-title-black {
  background: none !important;
  color: #000 !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #000 !important;
}
/* Smartphones page custom styles */
body.smartphones-bg {
  background: url('/vault/smartphones/background_pic/mobilesbg.jpg') center center/cover no-repeat, #18181b;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.soft-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 0;
  background: rgba(24,24,27,0.65);
  pointer-events: none;
}
.glass-card {
  background: rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.12);
  border: 1px solid rgba(200,200,200,0.10);
  backdrop-filter: blur(12px);
}
.futuristic-bg {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1;
  background: linear-gradient(120deg, rgba(139,92,246,0.18) 0%, rgba(236,72,153,0.12) 100%);
}
.futuristic-lines {
  position: absolute;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
}
.futuristic-lines svg {
  width: 100vw; height: 100vh;
  display: block;
}


/* smartphone END */

/* Transparent glassmorphism box for header logo */
.logo-glass-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 1.9rem;
  border-radius: 0.5rem; /* less rounded, more edgy */
  background: rgba(255,255,255,0.22);
  box-shadow: 0 4px 24px 0 rgba(59,130,246,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(35, 3, 101, 0.13);
  min-width: 4.5rem;
  min-height: 2.5rem;
  box-sizing: border-box;
}

/* Ensure logo text is visible and styled */
.stack-logo-transparent .line1, .stack-logo-transparent .line2 {
  font-family: 'Orbitron', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.54rem;
  color: #222;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-align: left;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
.stack-logo-transparent .line1 {
  margin-bottom: 0.1em;
}
/* Glassmorphism box for crystal-title */
.crystal-title-box {
  display: inline-block;
  position: relative;
  border-radius: 1rem;
  background: rgba(30,41,59,0.45);
  box-shadow: 0 4px 24px 0 rgba(59,130,246,0.10);
  backdrop-filter: blur(6px);
  padding: 0.5rem 0.5rem;
  z-index: 0;
}
body {
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  background: linear-gradient(120deg, rgba(120, 135, 222, 0.225) 20%, rgba(220, 95, 103, 0.22) 100%, rgba(206, 32, 90, 0.22) 20%);
  /* Removed global fade-in to prevent perceived late whitening */
  animation: none;
}
.blur-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('bgm4.jpg') center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(0px);
  z-index: -1;
}

.crystal-brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(to right, #02aff3, #05beec, #5cf503, #f99b04);
  background-size: auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  border-radius: 1rem;
  display: inline-block;
}

.crystal-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(to right, #67a602, #38bdf8, #f472b6, #fbbf24);
  background-size: auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  position: relative;
  border-radius: 1rem;
  box-shadow: none;
  padding: 1rem 2rem;
  display: inline-block;
  z-index: 1;
}

.crystal-title-slogan {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  color: #000 !important;
  background: none !important;
  border-radius: 1rem;
  padding: 1rem 2rem;
  display: inline-block;
}
.crystal-title, h2, h3 {
  animation: fadeInUp 1.2s cubic-bezier(.77,0,.18,1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.crystal-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: #2563eb;
  background: rgba(255,255,255,0.7);
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgba(59,130,246,0.08);
  padding: 0.5rem 1.5rem;
  display: inline-block;
  animation: pulseText 2.5s infinite alternate;
}
@keyframes pulseText {
  from { box-shadow: 0 2px 16px rgba(59,130,246,0.08); }
  to { box-shadow: 0 8px 32px rgba(59,130,246,0.18); }
}
.nav-link {
  position: relative;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #08142c !important;
  transition: color 0.3s, transform 0.3s;
  animation: fadeInUp 1.2s cubic-bezier(.77,0,.18,1);
}
.nav-link:hover {
  color: #f472b6 !important;
  transform: scale(1.12) rotate(-2deg);
  text-shadow: 0 2px 12px #38bdf8;
}
.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #081739, #f472b6);
  transition: width 0.3s;
  position: absolute;
  left: 0;
  bottom: -4px;
}
.nav-link:hover::after {
  width: 100%;
}
.card-animate h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: #0a2359;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  transition: color 0.3s, background 0.3s;
  animation: fadeInUp 1.2s cubic-bezier(.77,0,.18,1);
}
.card-animate:hover h3 {
  color: #f472b6;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}
.crystal-section h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #081737, #fbbf24);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 3s ease-in-out infinite alternate, fadeInUp 1.2s cubic-bezier(.77,0,.18,1);
}
.logo-animate {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 3px;
  animation: logoGradientMove 8s ease-in-out infinite alternate;
  text-shadow: 0 4px 24px rgba(59,130,246,0.18), 0 1px 0 #30026d;
  transition: transform 0.3s;
}
@keyframes logoGradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.hero-section {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 12px 48px 0 rgba(59,130,246,0.18), 0 2px 8px 0 rgba(0,0,0,0.08);
  backdrop-filter: blur(24px) brightness(1.08);
  border: 1.5px solid rgba(59,130,246,0.10);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 2.5rem 0;
  transition: box-shadow 0.3s, background 0.3s;
}

/* ===== Modern Hero Revamp (2025-08) ===== */
.footer-modern {
  position: relative;
  overflow: hidden;
  /* padding: 4rem 0 3.5rem; */
  margin: 1.75rem auto 2.5rem;
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.11) 40%, rgba(99,102,241,0.10) 85%);
  /* backdrop-filter: blur(8px) saturate(140%); */
  /* -webkit-backdrop-filter: blur(8px) saturate(140%); */
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.55), 0 6px 22px -10px rgba(0,0,0,0.38);
}
.hero-modern {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3.5rem;
  margin: 0 auto 2.5rem; /* remove top margin so it touches header */
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.11) 40%, rgba(99,102,241,0.10) 85%);
  /* backdrop-filter: blur(8px) saturate(140%); */
  /* -webkit-backdrop-filter: blur(8px) saturate(140%); */
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.55), 0 6px 22px -10px rgba(0,0,0,0.38);
}
.hero-modern.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  border-left: none;
  border-right: none;
}
footer { margin-top: 0 !important; }
/* Redesigned footer */
.site-footer { background:#0f172a; color:#cbd5e1; padding:3rem 1.5rem 2.5rem; position:relative; overflow:hidden; }
.site-footer:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(99,102,241,0.15), transparent 60%), radial-gradient(circle at 85% 70%, rgba(236,72,153,0.12), transparent 65%); pointer-events:none; }
.footer-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.footer-top { display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start; }
.footer-brand .footer-logo { font-family:'Montserrat','Poppins',sans-serif; font-weight:800; font-size:1.8rem; letter-spacing:.12em; background:linear-gradient(90deg,#8b5cf6,#ec4899,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 14px rgba(139,92,246,0.25); display:inline-block; }
.footer-brand .tagline { margin-top:.75rem; font-size:.9rem; line-height:1.5; color:#94a3b8; max-width:260px; }
.footer-heading { font-size:.75rem; letter-spacing:.25em; text-transform:uppercase; font-weight:600; color:#e2e8f0; margin:0 0 1rem; }
.footer-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-list a { color:#94a3b8; font-size:.87rem; text-decoration:none; transition:color .25s; }
.footer-list a:hover { color:#fff; }
.social-row { display:flex; gap:.85rem; }
.social-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); transition:background .3s,border-color .3s, transform .3s; color:#94a3b8; }
.social-icon:hover { background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 40%,#ec4899 100%); color:#fff; border-color:rgba(255,255,255,0.25); transform:translateY(-4px); }
.social-icon svg { width:20px; height:20px; }
.footer-bottom { margin-top:3rem; padding-top:1.25rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; text-align:center; border-top:1px solid rgba(255,255,255,0.08); color:#64748b; }
@media (max-width:640px){ .site-footer { padding:2.5rem 1.25rem 2rem; } .footer-top { gap:2rem; } .social-icon { width:38px; height:38px; } }
/* Footer newsletter panel reuse (full-bleed) */
.footer-modern {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.11) 40%, rgba(99,102,241,0.10) 85%);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.55), 0 4px 18px -6px rgba(0,0,0,0.38);
}
.hero-modern:before,
.hero-modern:after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-modern:before { top:-160px; left:-140px; background: radial-gradient(circle at 30% 30%, rgba(139,92,246,0.9), transparent 70%); }
.hero-modern:after { bottom:-180px; right:-140px; background: radial-gradient(circle at 70% 60%, rgba(236,72,153,0.85), transparent 70%); }

.hero-modern .hero-inner { position: relative; z-index: 2; max-width: 1100px; margin:0 auto; padding: 0 1.5rem; }

.hero-eyebrow { display:inline-block; font-size:.75rem; letter-spacing:.35em; text-transform:uppercase; font-weight:600; color:#6366f1; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.25); padding:.45rem .9rem; border-radius:999px; backdrop-filter:blur(6px); margin-bottom:1.15rem; }

.hero-headline { font-family:'Poppins',sans-serif; font-weight:800; line-height:1.05; font-size:clamp(2.4rem,4.8vw,3.75rem); letter-spacing:.015em; margin:0 0 1.25rem; color:#fff; position:relative; }
.hero-headline .gradient-word { background:linear-gradient(90deg,#6366f1 0%,#8b5cf6 35%,#ec4899 70%,#f472b6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 18px rgba(139,92,246,0.35)); }

.hero-sub { max-width:760px; margin:0 auto 2.2rem; font-size:1.05rem; line-height:1.55; font-weight:400; color:#e2e8f0; letter-spacing:.02em; }
.hero-sub strong { color:#ffffff; font-weight:600; }

.hero-cta-group { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.btn-pill { position:relative; display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 1.6rem; font-size:.95rem; font-weight:600; letter-spacing:.05em; border-radius:999px; color:#fff; text-decoration:none; overflow:hidden; /* transitions removed */ }
.btn-primary-gradient { background:linear-gradient(90deg,#6366f1 0%,#8b5cf6 40%,#ec4899 100%); box-shadow:0 10px 30px -8px rgba(99,102,241,.6); }
.btn-primary-gradient:hover { /* no movement */ box-shadow:0 10px 30px -8px rgba(99,102,241,.6); }
.btn-outline-glass { background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.35); color:#f1f5f9; }
.btn-outline-glass:hover { background:rgba(255,255,255,0.12); /* no movement */ }

.hero-metrics { margin-top:2.25rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1.75rem; }
.metric { display:flex; flex-direction:column; min-width:120px; }
.metric-value { font-size:1.65rem; font-weight:700; background:linear-gradient(90deg,#f472b6,#8b5cf6); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 10px rgba(236,72,153,0.45)); }
.metric-label { font-size:.7rem; letter-spacing:.25em; font-weight:600; color:#94a3b8; text-transform:uppercase; margin-top:.2rem; }

@media (max-width: 640px) {
  .hero-modern { padding:3.2rem 0 3rem; border-radius:1.75rem; }
  .hero-headline { font-size:clamp(2.1rem,8.5vw,3.1rem); }
  .hero-sub { font-size:.95rem; }
  .hero-cta-group { gap:.75rem; }
}
.group:hover .bg-cover {
  transform: scale(1.05);
  transition: transform 0.3s;
}
.brand-ten, .brand-z, .brand-vault {
  font-weight: 900;
  display: inline-block;
  color: #2563eb !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  animation: none !important;
}
@keyframes brandPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.18); }
}


/* Crystal glass card style for smartphones */
.crystal-card {
  /* Reduced white overlay & blur to stop milky appearance */
  background: rgba(255,255,255,0.06);
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.25), 0 2px 6px 0 rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-radius: 1.25rem;
  transition: box-shadow 0.25s, background 0.25s;
}
.crystal-card:hover {
  box-shadow: 0 8px 36px 0 rgba(0,0,0,0.35), 0 3px 10px 0 rgba(0,0,0,0.28);
}

/* White description text for smartphone cards */
.crystal-card-desc {
  color: #fff !important;
}

/* Hide scrollbar for slider */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}


.stack-logo-transparent {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stack-logo-transparent .line1,
.stack-logo-transparent .line2 {
  display: block;
  width: 100%;
  text-align: center;
}

.stack-logo-transparent .line1 {
  font-size: 0.84rem;
  color: #00eaff;
  letter-spacing: 0.2rem;
  text-shadow: 0 0 1px #00eaff;
}

.stack-logo-transparent .line2 {
  font-size: 0.77rem;
  color: #00ffb3;
  letter-spacing: 0.2rem;
  text-shadow: 0 0 1px #00ffb3;
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 2px #00ffcc, 0 0 5px #00ffcc;
  }
  50% {
    opacity: 0.95;
    text-shadow: 0 0 1px #00ffcc, 0 0 3px #00ffcc;
  }
}
/* Snap scrolling for slider */
#categories-slider {
  scroll-snap-type: x mandatory;
}
#categories-slider > * {
  scroll-snap-align: start;
}

/* Animation keyframes and utility classes */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: none;
  }
}

.shimmer {
  background: linear-gradient(90deg, #e83e99 0%, #46d37a 50%, #a464e5 100%);
  background-size: 200% 200%;
  animation: shimmerMove 2.5s linear infinite;
}
@keyframes shimmerMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.card-animate {
  /* Neutralized fade/scale so cards appear final immediately */
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.card-hover {
  transition: transform 0.2s cubic-bezier(.5,1.5,.5,1), box-shadow 0.2s;
}
.card-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(91,33,182,0.12);
}

.pulse {
  animation: pulseBtn 0.6s;
}
@keyframes pulseBtn {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.fade-scroll {
  opacity: 0;
  transition: opacity 0.8s;
}
.fade-scroll.visible {
  opacity: 1;
}