/* =====================================================================
   NEXAWEB — extra styles
   Only what Tailwind (CDN) can't do on its own: glows, gradients,
   the grid background, motion graphics, scroll animations and the FAQ.
   All motion is switched off for visitors who ask for reduced motion.
   ===================================================================== */

:root {
  --bg: #0A0A0B;
  --bg-2: #101013;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #8B5CF6;
  --accent-2: #A855F7;
  --accent-soft: rgba(139, 92, 246, 0.14);
  --muted: #A1A1AA;
  --header-h: 64px;
}

html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; }
body { background: var(--bg); color: #D4D4D8; min-height: 100vh; }
section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

/* Layout container */
.container-x { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container-x { padding-inline: 1.5rem; } }

.text-balance { text-wrap: balance; }

/* Skip link (keyboard users) */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .6rem 1rem; border-radius: 999px; background: #fff; color: #0A0A0B; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Focus ring */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px;
}

/* ---------- Logo ---------- */
.logo-mark { width: 26px; height: 26px; filter: drop-shadow(0 0 10px rgba(139,92,246,.55)); }

/* ---------- Buttons ---------- */
.btn-primary {
  box-shadow:
    0 0 0 1px rgba(196, 181, 253, 0.35) inset,
    0 10px 30px -10px rgba(139, 92, 246, 0.75),
    0 0 24px -6px rgba(168, 85, 247, 0.45);
  transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(196, 181, 253, 0.5) inset,
    0 14px 40px -10px rgba(139, 92, 246, 0.9),
    0 0 36px -4px rgba(168, 85, 247, 0.55);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ---------- Hero backgrounds ---------- */
.hero-glow {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(139, 92, 246, 0.30), transparent 70%),
    radial-gradient(35% 30% at 80% 10%, rgba(168, 85, 247, 0.14), transparent 70%);
}
.grid-bg {
  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: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 30%, transparent 100%);
}
.text-gradient {
  background: linear-gradient(100deg, #E9D5FF 0%, #C4B5FD 35%, #A78BFA 70%, #A855F7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pulse-dot {
  width: 7px; height: 7px; border-radius: 999px; background: #A78BFA;
  box-shadow: 0 0 0 0 rgba(167,139,250,.6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(167,139,250,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}

/* Hero browser mock */
.mock-frame {
  box-shadow:
    0 0 0 1px rgba(139,92,246,.10),
    0 40px 120px -40px rgba(139, 92, 246, 0.55),
    0 20px 60px -30px rgba(0,0,0,.8);
}
.mock-fade { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.map-tile {
  background-color: #0E0E12;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px;
}
.pin-ring { box-shadow: 0 0 0 6px rgba(139,92,246,.18), 0 0 0 14px rgba(139,92,246,.08), 0 0 30px rgba(139,92,246,.6); }
.bar { background: linear-gradient(180deg, rgba(167,139,250,.9), rgba(124,58,237,.25)); border-radius: 4px 4px 1px 1px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border-radius: 1.25rem;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 0 0 1px rgba(139,92,246,.12), 0 20px 50px -30px rgba(139, 92, 246, 0.6);
}
.card-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 60% at 100% 0%, rgba(139,92,246,.14), transparent 70%);
}
.icon-box {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  color: #C4B5FD; background: var(--accent-soft); border: 1px solid rgba(139,92,246,.28);
}

/* Section eyebrow */
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #A78BFA; }

/* Divider between sections */
.section-line { border-top: 1px solid rgba(255,255,255,.06); }

/* ---------- Pricing ---------- */
.plan-featured {
  border-color: rgba(139, 92, 246, 0.65) !important;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(139,92,246,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  box-shadow: 0 0 0 1px rgba(139,92,246,.35), 0 30px 80px -30px rgba(139, 92, 246, 0.7);
}
.plan-featured:hover { box-shadow: 0 0 0 1px rgba(139,92,246,.5), 0 30px 90px -30px rgba(139, 92, 246, 0.85); }
.badge-popular { box-shadow: 0 0 20px -4px rgba(139,92,246,.8); }

/* ---------- Work cards ---------- */
.work-art { background-color: #111114; }
.work-card:hover .work-window { transform: translateY(-4px); }
.work-window { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- Process ---------- */
.step-num {
  background: radial-gradient(circle at 30% 30%, rgba(167,139,250,.25), rgba(139,92,246,.08));
  box-shadow: 0 0 0 1px rgba(139,92,246,.4) inset, 0 0 24px -6px rgba(139,92,246,.6);
}

/* ---------- Final CTA band ---------- */
.cta-band {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(139,92,246,.30), transparent 70%),
    radial-gradient(40% 60% at 50% 120%, rgba(168,85,247,.18), transparent 70%),
    #101013;
}

/* ---------- FAQ accordion ---------- */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.7,.2,1); }
.faq-panel > div { overflow: hidden; visibility: hidden; transition: visibility .32s; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-panel > div { visibility: visible; }
.faq-icon { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: #fff; background: rgba(139,92,246,.35); }

/* ---------- Nav ---------- */
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.05); }
#mobile-menu { transition: opacity .2s ease, transform .2s ease; }

/* Floating WhatsApp button (mobile) */
.fab { opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .fab { transition: none; }
  .reveal { opacity: 1; transform: none; }
  .pulse-dot { animation: none; }
  .btn-primary:hover, .work-card:hover .work-window { transform: none; }
}


/* =====================================================================
   MOTION GRAPHICS
   Everything below animates only transform, opacity or backgrounds,
   and loops pause while their section is off screen (see .in-view).
   ===================================================================== */

/* Loops only run while their section is on screen */
main section:not(.in-view) *,
main section:not(.in-view) *::before,
main section:not(.in-view) *::after { animation-play-state: paused !important; }

@keyframes fade-in { from { opacity: 0; } }

/* ---------- Scroll progress line under the header ---------- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #7C3AED, #A78BFA, #E9D5FF);
  box-shadow: 0 0 12px rgba(139, 92, 246, .8);
}

/* ---------- Drifting light (hero + final CTA) ---------- */
.aurora { overflow: hidden; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
.blob-1 { width: 900px; height: 600px; left: 50%; top: -340px; margin-left: -450px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .42), transparent);
  animation: drift-a 16s ease-in-out infinite alternate; }
.blob-2 { width: 520px; height: 520px; right: -160px; top: -120px;
  background: radial-gradient(closest-side, rgba(168, 85, 247, .22), transparent);
  animation: drift-b 20s ease-in-out infinite alternate; }
.blob-3 { width: 560px; height: 560px; left: -200px; top: 140px;
  background: radial-gradient(closest-side, rgba(99, 102, 241, .16), transparent);
  animation: drift-c 24s ease-in-out infinite alternate; }
.blob-cta-1 { width: 720px; height: 420px; left: 50%; top: -250px; margin-left: -360px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .38), transparent);
  animation: drift-a 14s ease-in-out infinite alternate; }
.blob-cta-2 { width: 520px; height: 380px; left: 50%; bottom: -260px; margin-left: -260px;
  background: radial-gradient(closest-side, rgba(168, 85, 247, .24), transparent);
  animation: drift-c 18s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform: translate3d(-6%, 0, 0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.15); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-120px, 90px, 0) scale(1.1); } }
@keyframes drift-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(140px, -60px, 0) scale(.9); } }

/* ---------- Light beams running down the hero grid ---------- */
.grid-center { background-position: 50% 0; }
.beam {
  position: absolute; top: 0; width: 1px; height: 140px; opacity: 0;
  left: calc(50% - 28px + var(--k) * 56px);
  background: linear-gradient(180deg, transparent, rgba(196, 181, 253, .95), transparent);
  animation: beam-down 7s linear infinite both; animation-delay: var(--bd, 0s);
}
@keyframes beam-down {
  0%   { transform: translateY(-140px); opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: .7; }
  100% { transform: translateY(720px); opacity: 0; }
}

/* ---------- Headline: word-by-word reveal ---------- */
.word {
  display: inline-block;
  animation: word-in .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
.word.text-gradient {
  background-size: 200% 100%;
  animation: word-in .9s cubic-bezier(.2, .7, .2, 1) both, grad-shift 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 70ms + 120ms), 1.6s;
}
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.nudge-down { animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- Hero mock: site builds itself ---------- */
.typing {
  display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap;
  width: calc(var(--n) * 1ch + 4px); padding-right: 2px;
  border-right: 1px solid rgba(167, 139, 250, .9);
  animation: typing 1.3s steps(var(--n)) .5s both, caret .8s step-end infinite;
}
@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }

.mock-line {
  transform-origin: left center;
  animation: line-in .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--l) * 110ms + 800ms);
}
@keyframes line-in { from { transform: scaleX(0); opacity: 0; } }

/* bars grow in, then keep breathing */
.bar-wrap {
  transform-origin: bottom;
  animation: bar-in .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--b) * 70ms + 1.1s);
}
.bar-wrap .bar {
  transform-origin: bottom;
  animation: breathe 3.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--b) * -.45s);
}
@keyframes bar-in { from { transform: scaleY(0); } }
@keyframes breathe { from { transform: scaleY(.8); } to { transform: scaleY(1); } }

/* map: routes flowing to a pin with a radar ripple */
.route {
  fill: none; stroke: rgba(167, 139, 250, .75); stroke-width: 1.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 4 5;
  animation: route-flow 1.2s linear infinite;
}
@keyframes route-flow { to { stroke-dashoffset: -18; } }
.ripple {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 999px; border: 1px solid rgba(167, 139, 250, .7); opacity: 0;
  animation: ripple 2.8s ease-out infinite both;
}
.ripple-2 { animation-delay: 1.4s; }
@keyframes ripple { 0% { opacity: .85; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.map-pin { animation: pin-float 3s ease-in-out infinite alternate; }
@keyframes pin-float { from { transform: translateY(1px); } to { transform: translateY(-3px); } }

/* cursor clicks the button, a WhatsApp message pops in (8s loop) */
.mock-cta { animation: fade-in .6s ease 1.4s both, press 8s ease-in-out 2.4s infinite; }
@keyframes press { 0%, 32%, 40%, 100% { transform: scale(1); } 35% { transform: scale(.93); } }
.mock-cursor {
  position: absolute; left: 58%; top: 48%; width: 18px; height: 18px; z-index: 2; opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
  animation: cursor 8s cubic-bezier(.45, .05, .25, 1) 2.4s infinite both;
}
@keyframes cursor {
  0%        { opacity: 0; transform: translate(160px, 80px); }
  8%        { opacity: 1; }
  30%       { transform: translate(0, 0) scale(1); }
  34%       { transform: translate(0, 0) scale(.82); }
  38%       { transform: translate(0, 0) scale(1); }
  72%       { opacity: 1; transform: translate(0, 0); }
  84%, 100% { opacity: 0; transform: translate(40px, 50px); }
}
.click-ring {
  position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(196, 181, 253, .9); opacity: 0;
  animation: click-ring 8s ease-out 2.4s infinite both;
}
@keyframes click-ring {
  0%, 33%   { opacity: 0; transform: scale(1); }
  35%       { opacity: .9; transform: scale(1); }
  52%, 100% { opacity: 0; transform: scale(1.7); }
}
.mock-toast {
  z-index: 2; box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(139, 92, 246, .6);
  animation: toast 8s cubic-bezier(.2, .7, .2, 1) 2.4s infinite both;
}
@keyframes toast {
  0%, 38%   { opacity: 0; transform: translateY(-10px) scale(.96); }
  45%, 80%  { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* floating chips around the mock (large screens) */
.float-chip {
  z-index: 3;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(139, 92, 246, .08);
  animation: fade-in .8s ease both, float-y 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--c) * .25s + 1.6s), calc(var(--c) * -2s);
}
@keyframes float-y { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

/* ---------- Services ticker ---------- */
.ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { animation: ticker 45s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Process: lines draw in, light travels along them ---------- */
.step-line-h, .step-line-v { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + 350ms); }
.step-line-h { transform-origin: left center; transform: scaleX(0); }
.step-line-v { transform-origin: center top; transform: scaleY(0); }
.reveal.is-visible .step-line-h, .reveal.is-visible .step-line-v { transform: none; }
.step-line-h::after, .step-line-v::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; }
.step-line-h::after {
  left: 0; right: 0; top: -1px; height: 3px;
  background-image: linear-gradient(90deg, transparent, #DDD6FE, transparent); background-size: 35% 100%;
  animation: travel-x 3.6s ease-in-out infinite both; animation-delay: calc(var(--s) * .9s + 1.6s);
}
.step-line-v::after {
  top: 0; bottom: 0; left: -1px; width: 3px;
  background-image: linear-gradient(180deg, transparent, #DDD6FE, transparent); background-size: 100% 35%;
  animation: travel-y 3.6s ease-in-out infinite both; animation-delay: calc(var(--s) * .9s + 1.6s);
}
@keyframes travel-x { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes travel-y { from { background-position: 0 -60%; } to { background-position: 0 160%; } }
.step-num { animation: step-glow 4.8s ease-in-out infinite; animation-delay: calc(var(--s) * 1.2s); }
@keyframes step-glow {
  0%, 22%, 100% { box-shadow: 0 0 0 1px rgba(139, 92, 246, .4) inset, 0 0 24px -6px rgba(139, 92, 246, .6); color: #DDD6FE; }
  10%           { box-shadow: 0 0 0 1px rgba(196, 181, 253, .9) inset, 0 0 34px 2px rgba(139, 92, 246, .75); color: #fff; }
}

/* ---------- Cards: border glow that follows the mouse ---------- */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(196, 181, 253, .85), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
}
.card:hover::after { opacity: 1; }
.card:not(.plan-featured):hover {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(139, 92, 246, .09), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
}
.icon-box { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.card:hover .icon-box { transform: translateY(-2px); box-shadow: 0 0 22px -4px rgba(139, 92, 246, .75); border-color: rgba(167, 139, 250, .55); }

/* work card art slowly shifts colour */
.work-art { background-size: 170% 170%; animation: art-drift 16s ease-in-out infinite alternate; animation-delay: var(--ad, 0s); }
@keyframes art-drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* ---------- Beam of light circling a border (Most Popular + final CTA) ---------- */
@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.beam-border::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--beam-angle), transparent 0deg, transparent 250deg, #A78BFA 310deg, #F5F3FF 340deg, #A855F7 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 5s linear infinite;
}
.cta-band.beam-border::before { inset: 0; animation-duration: 7s; }
@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* ---------- Buttons: light sweep ---------- */
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover::after { transition: transform .8s cubic-bezier(.2, .7, .2, 1); transform: skewX(-20deg) translateX(480%); }
.btn-shine::after { animation: shine 6s ease-in-out 3s infinite; }
@keyframes shine { 0%, 75% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(480%); } }

/* ---------- Reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .step-line-h, .step-line-v { transform: none; transition: none; }
  .mock-cursor, .click-ring, .ripple, .beam, .btn-primary::after { display: none; }
}