html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background:#fff; }
h1, h2, h3, h4, .font-heading { font-family: 'Manrope', sans-serif; }

/* ---- Signature element: the Visibility Pulse ---- */
.pulse-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pulse-ring {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid rgba(0,217,255,0.35);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: pulseOut 5.5s cubic-bezier(0.22,0.61,0.36,1) infinite;
}
.pulse-ring.r2 { animation-delay: 1.8s; border-color: rgba(124,58,237,0.3); }
.pulse-ring.r3 { animation-delay: 3.6s; border-color: rgba(212,175,55,0.25); }
@keyframes pulseOut {
  0%   { width: 40px; height: 40px; opacity: 0.9; }
  80%  { opacity: 0.15; }
  100% { width: 900px; height: 900px; opacity: 0; }
}
.signal-dot {
  position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%;
  background: #00D9FF; transform: translate(-50%,-50%);
  box-shadow: 0 0 20px 4px rgba(0,217,255,0.6);
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.grad-text {
  background: linear-gradient(90deg,#00D9FF,#7C3AED);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.card-hover { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(11,16,32,0.15); border-color: rgba(0,217,255,0.4); }

::selection { background: #00D9FF; color: #0B1020; }

.focus-ring:focus-visible { outline: 2px solid #00D9FF; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pulse-ring, .reveal { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; }
}

/* mega menu */
.mega { opacity:0; visibility:hidden; transform: translateY(8px); transition: all .25s ease; }
.group:hover .mega, .group:focus-within .mega { opacity:1; visibility:visible; transform: translateY(0); }

/* ---- Staggered hero entrance (plays on load, no JS needed) ---- */
.hero-stagger > * { opacity: 0; transform: translateY(22px); animation: heroReveal .85s cubic-bezier(0.22,0.61,0.36,1) forwards; }
.hero-stagger > *:nth-child(1) { animation-delay: .05s; }
.hero-stagger > *:nth-child(2) { animation-delay: .2s; }
.hero-stagger > *:nth-child(3) { animation-delay: .35s; }
.hero-stagger > *:nth-child(4) { animation-delay: .5s; }
.hero-stagger > *:nth-child(5) { animation-delay: .65s; }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }

/* ---- Page transition overlay (MPA fade between full page loads) ---- */
#pageExitVeil {
  position: fixed; inset: 0; z-index: 999; background: #0B1020;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
#pageExitVeil.active { opacity: 1; pointer-events: all; }

/* ---- Premium loading screen (first visit only) ---- */
#siteLoader {
  position: fixed; inset: 0; z-index: 1000; background: #0B1020;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#siteLoader.done { opacity: 0; visibility: hidden; }
#siteLoader .loader-mark {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; color: #fff;
  letter-spacing: 0.02em; position: relative; display: flex; align-items: center; gap: 10px;
}
#siteLoader .loader-ring {
  width: 10px; height: 10px; border-radius: 50%; background: #00D9FF;
  box-shadow: 0 0 0 0 rgba(0,217,255,0.6);
  animation: loaderPulse 1.1s ease-out infinite;
}
@keyframes loaderPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,217,255,0.55); }
  70% { box-shadow: 0 0 0 22px rgba(0,217,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,217,255,0); }
}

/* ---- Custom cursor (desktop pointer devices only) ---- */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor { cursor: none; }
  body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor summary { cursor: none; }
  #cursorDot, #cursorRing { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 998; border-radius: 50%; transform: translate(-50%,-50%); }
  #cursorDot { width: 6px; height: 6px; background: #00D9FF; transition: transform .1s ease; }
  #cursorRing { width: 32px; height: 32px; border: 1px solid rgba(0,217,255,0.5); transition: transform .18s ease, width .2s ease, height .2s ease, border-color .2s ease; }
  #cursorRing.hovering { width: 48px; height: 48px; border-color: rgba(124,58,237,0.6); background: rgba(124,58,237,0.06); }
}

/* ---- Section divider using the pulse motif ---- */
.pulse-divider { position: relative; height: 64px; overflow: hidden; }
.pulse-divider svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0.5; }

/* ---- Parallax hero background layer ---- */
.parallax-layer { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero-stagger > * { opacity: 1; transform: none; animation: none; }
  #siteLoader { display: none; }
}