/* ==========================================================================
   Nexus Import — design tokens
   ========================================================================== */
:root{
  --bg:            #0d1220;
  --bg-elevated:   #131a2c;
  --surface:       #182036;
  --surface-2:     #1f2942;
  --border:        rgba(163, 180, 214, 0.20);
  --border-strong: rgba(163, 180, 214, 0.38);

  --text:          #f5f7fc;
  --text-muted:    #aab6cf;
  --text-dim:      #7885a2;

  --accent:        #4c86ff;
  --accent-2:      #64e6ff;
  --accent-soft:   rgba(76, 134, 255, 0.18);
  --accent-line:   rgba(76, 134, 255, 0.42);

  --font-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  color-scheme: dark;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

ul, ol{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3, dt, dd{ margin: 0; }

button{ font: inherit; }

:focus-visible{
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

/* ==========================================================================
   Background field: canvas network + cursor glow + grid
   ========================================================================== */
.bg-field{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-blobs{
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(70px);
  opacity: .68;
}
.blob{
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.blob-1{
  width: 46vw; height: 46vw;
  left: -10vw; top: -10vw;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 70%);
  animation: blobDrift1 22s ease-in-out infinite;
}
.blob-2{
  width: 40vw; height: 40vw;
  right: -8vw; top: 10vh;
  background: radial-gradient(circle at 60% 40%, var(--accent-2) 0%, transparent 70%);
  animation: blobDrift2 26s ease-in-out infinite;
}
.blob-3{
  width: 34vw; height: 34vw;
  left: 30vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, #7c5cff 0%, transparent 70%);
  animation: blobDrift3 30s ease-in-out infinite;
}
@keyframes blobDrift1{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  50%{ transform: translate(6vw, 8vh) scale(1.15); }
}
@keyframes blobDrift2{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  50%{ transform: translate(-7vw, 6vh) scale(1.1); }
}
@keyframes blobDrift3{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  50%{ transform: translate(5vw, -6vh) scale(1.2); }
}

#network{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}

.bg-glow{
  position: absolute;
  width: 620px;
  height: 620px;
  left: var(--glow-x, 50%);
  top: var(--glow-y, 20%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-soft) 0%, rgba(61,123,245,0) 70%);
  transition: opacity .4s var(--ease);
  opacity: var(--glow-opacity, 0);
}

.bg-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(163,180,214,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(163,180,214,0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 90%);
}

main, .nav, .footer{ position: relative; z-index: 1; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.section{
  max-width: var(--container);
  margin: 0 auto;
  padding: 7rem 1.5rem;
}
.section-alt{ position: relative; }
.section-alt::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(180deg, rgba(12,18,30,0) 0%, rgba(12,18,30,.55) 12%, rgba(12,18,30,.55) 88%, rgba(12,18,30,0) 100%);
  z-index: -1;
}

.section-head{ max-width: 640px; margin-bottom: 3.5rem; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 1.25rem;
}
.eyebrow-static{ color: var(--text-dim); }
.eyebrow-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 12px 2px var(--accent-2);
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .45; transform: scale(1.35); }
}

.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.01em;
}

.section-sub{
  color: var(--text-muted);
  font-size: 1.02rem;
  margin-top: 1rem;
  max-width: 52ch;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), #2452c9);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(61,123,245,.65);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(61,123,245,.8); }
.btn-ghost{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--accent-2); color: var(--accent-2); }
.btn-sm{ padding: .6rem 1.15rem; font-size: .84rem; }
.btn-block{ width: 100%; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(5,7,12,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled{
  border-bottom-color: var(--border);
  background: rgba(5,7,12,.85);
}

.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand{ display: inline-flex; align-items: center; margin-right: auto; }
.brand-mark{
  height: 52px;
  width: auto;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(87, 226, 255, .25));
  transition: filter .3s var(--ease);
}
.brand:hover .brand-mark{ filter: drop-shadow(0 0 26px rgba(87, 226, 255, .45)); }

.logo-node{
  transform-origin: center;
  transform-box: fill-box;
  animation: logoPulse 2.6s ease-in-out infinite;
}
.logo-node-1{ animation-delay: 0s; }
.logo-node-2{ animation-delay: .35s; }
.logo-node-3{ animation-delay: .7s; }

@keyframes logoPulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.22); opacity: .75; }
}

.brand-footer .brand-mark{ height: 40px; }

.nav-links{ display: flex; align-items: center; gap: 2rem; }
.nav-links a{
  font-size: .9rem;
  color: var(--text-muted);
  transition: color .2s var(--ease);
  position: relative;
}
.nav-links a:hover{ color: var(--text); }

.nav-cta{ margin-left: .5rem; }

.nav-toggle{
  display: none;
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span{
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  display: none;
  flex-direction: column;
  gap: .25rem;
  padding: 0 1.5rem 1.5rem;
  background: rgba(5,7,12,.97);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a{
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.mobile-menu .btn{ margin-top: 1rem; }
.nav.is-open .mobile-menu{ display: flex; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
}

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  z-index: 0;
}
.hero-video.is-ready{ opacity: .55; }
.hero-video-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(13,18,32,.35) 0%, rgba(13,18,32,.55) 55%, var(--bg) 96%),
    linear-gradient(90deg, var(--bg) 0%, rgba(5,7,12,.35) 30%, rgba(5,7,12,.35) 70%, var(--bg) 100%);
}
.hero-inner{ position: relative; z-index: 1; max-width: 980px; }

.hero-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.6rem);
  line-height: .98;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.text-gradient{
  background: linear-gradient(100deg, var(--accent-2), var(--accent) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub{
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 56ch;
  margin: 1.75rem auto 0;
}

.hero-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.hero-actions svg{ transition: transform .25s var(--ease); }
.hero-actions a:hover svg{ transform: translateX(3px); }

.stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 4.5rem 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.stat-num{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--text);
}
.stat-num.stat-static{ color: var(--accent-2); }
.stat-label{
  font-size: .82rem;
  color: var(--text-dim);
  margin-top: .35rem;
}

.hero-scroll{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 3.5rem;
}
.hero-scroll span{
  width: 1px; height: 34px;
  background: linear-gradient(var(--accent-2), transparent);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0;}
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1;}
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1;}
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0;}
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-section{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
  overflow: hidden;
}
.marquee-track{
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: marquee 32s linear infinite;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.marquee-track span:nth-child(odd){ color: var(--text-muted); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ==========================================================================
   Category grid
   ========================================================================== */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.cat-card{
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.cat-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--ease), transform .5s var(--ease);
  z-index: 0;
}
.cat-video.is-ready{ opacity: .6; }
.cat-card-media:hover .cat-video.is-ready{ opacity: .82; transform: scale(1.04); }
.cat-video-overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(19,26,44,.2) 0%, var(--surface) 85%);
}
.cat-card-media .cat-index,
.cat-card-media .cat-icon,
.cat-card-media h3,
.cat-card-media p,
.cat-card-media .cat-tags{
  position: relative;
  z-index: 1;
}
.cat-card:hover{
  border-color: var(--accent-line);
  transform: translateY(-4px);
}
.cat-card-wide{ grid-column: span 2; }

.cat-index{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}

.cat-icon{
  width: 44px; height: 44px;
  color: var(--accent-2);
  margin-bottom: 1.25rem;
}
.cat-icon svg{ width: 100%; height: 100%; }

.cat-card h3{
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.cat-card p{
  color: var(--text-muted);
  font-size: .92rem;
  margin: 0 0 1.4rem;
}

.cat-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cat-tags li{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .3rem .7rem;
}

/* ==========================================================================
   Value grid
   ========================================================================== */
.value-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.value-card{
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--border-strong);
}
.value-num{
  display: block;
  font-family: var(--font-mono);
  color: var(--accent-2);
  font-size: .82rem;
  margin-bottom: 1.5rem;
}
.value-card h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.value-card p{
  color: var(--text-muted);
  font-size: .9rem;
}

/* ==========================================================================
   Process timeline
   ========================================================================== */
.process{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: step;
  position: relative;
}
.process::before{
  content: "";
  position: absolute;
  top: 22px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-line), var(--border) 80%);
  z-index: -1;
}
.process-step{ position: relative; }
.process-marker{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.process-marker span{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--accent-2);
}
.process-step h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.process-step p{
  color: var(--text-muted);
  font-size: .9rem;
}

/* ==========================================================================
   CTA / contact
   ========================================================================== */
.cta-card{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  background: linear-gradient(160deg, var(--surface), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
}
.cta-card::after{
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -140px; top: -140px;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

.contact-info{ margin-top: 2.25rem; display: flex; flex-direction: column; gap: .9rem; }
.contact-row{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .95rem;
  color: var(--text);
  width: fit-content;
}
.contact-row svg{ color: var(--accent-2); flex-shrink: 0; }
a.contact-row{ transition: color .2s var(--ease); }
a.contact-row:hover{ color: var(--accent-2); }
.contact-row-static{ color: var(--text-muted); }

.contact-note{
  margin-top: 1.5rem;
  font-size: .78rem;
  color: var(--text-dim);
  font-style: italic;
}

.cta-form{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
}
.field{ display: flex; flex-direction: column; gap: .4rem; }
.field label{
  font-size: .78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.field input, .field select, .field textarea{
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: .7rem .85rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .92rem;
  resize: vertical;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--accent);
  outline: none;
}
.form-hint{
  font-size: .76rem;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  border-top: 1px solid var(--border);
  padding: 3rem 1.5rem;
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.brand-footer .brand-mark{ height: 34px; }
.footer-links{ display: flex; gap: 1.75rem; }
.footer-links a{ font-size: .86rem; color: var(--text-muted); }
.footer-links a:hover{ color: var(--text); }
.footer-copy{
  font-size: .8rem;
  color: var(--text-dim);
  width: 100%;
  text-align: center;
  order: 3;
  margin: 1rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }

.cat-grid [data-reveal]:nth-child(1){ transition-delay: 0s; }
.cat-grid [data-reveal]:nth-child(2){ transition-delay: .08s; }
.cat-grid [data-reveal]:nth-child(3){ transition-delay: .16s; }
.cat-grid [data-reveal]:nth-child(4){ transition-delay: .24s; }
.cat-grid [data-reveal]:nth-child(5){ transition-delay: .32s; }

.value-grid [data-reveal]:nth-child(1){ transition-delay: 0s; }
.value-grid [data-reveal]:nth-child(2){ transition-delay: .08s; }
.value-grid [data-reveal]:nth-child(3){ transition-delay: .16s; }
.value-grid [data-reveal]:nth-child(4){ transition-delay: .24s; }

.process [data-reveal]:nth-child(1){ transition-delay: 0s; }
.process [data-reveal]:nth-child(2){ transition-delay: .08s; }
.process [data-reveal]:nth-child(3){ transition-delay: .16s; }
.process [data-reveal]:nth-child(4){ transition-delay: .24s; }

/* ==========================================================================
   Motion layer — tilt, float, pulse, parallax
   ========================================================================== */

/* Background parallax: grid + glow drift slower than scroll for depth */
.bg-grid{
  transform: translateY(calc(var(--scroll-y, 0px) * 0.08));
}
#network{
  transform: translateY(calc(var(--scroll-y, 0px) * 0.03));
}

/* Hero gradient text: slow animated shimmer */
.text-gradient{
  background-size: 200% auto;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* Marquee: edge fade + livelier speed */
.marquee{
  -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{ animation-duration: 22s; }

/* Category cards: 3D tilt on pointer move (values set inline via JS).
   Selector specificity is bumped to beat [data-reveal].in-view's transform. */
.cat-grid{ perspective: 1200px; }
.cat-grid .cat-card{
  transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(0);
  transition: transform .35s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.cat-grid .cat-card:hover{
  transform: perspective(1200px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-6px);
}

/* Category icons: idle float + hover spin-in */
.cat-icon{
  animation: iconFloat 4.5s ease-in-out infinite;
}
.cat-card:nth-child(2) .cat-icon{ animation-delay: .3s; }
.cat-card:nth-child(3) .cat-icon{ animation-delay: .6s; }
.cat-card:nth-child(4) .cat-icon{ animation-delay: .9s; }
.cat-card:nth-child(5) .cat-icon{ animation-delay: 1.2s; }
@keyframes iconFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Value cards: number glow breathes, card lifts on hover */
.value-card{
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.value-card:hover{
  transform: translateY(-4px);
  border-top-color: var(--accent-2);
}
.value-num{ animation: numGlow 3.2s ease-in-out infinite; }
.value-card:nth-child(2) .value-num{ animation-delay: .25s; }
.value-card:nth-child(3) .value-num{ animation-delay: .5s; }
.value-card:nth-child(4) .value-num{ animation-delay: .75s; }
@keyframes numGlow{
  0%, 100%{ text-shadow: 0 0 0 rgba(87,226,255,0); }
  50%{ text-shadow: 0 0 14px rgba(87,226,255,.75); }
}

/* Process markers: radar ping ring */
.process-marker{ position: relative; }
.process-marker::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  animation: ping 2.4s cubic-bezier(0,.5,.5,1) infinite;
}
.process-step:nth-child(2) .process-marker::before{ animation-delay: .5s; }
.process-step:nth-child(3) .process-marker::before{ animation-delay: 1s; }
.process-step:nth-child(4) .process-marker::before{ animation-delay: 1.5s; }
@keyframes ping{
  0%{ transform: scale(1); opacity: .7; }
  100%{ transform: scale(1.9); opacity: 0; }
}

/* CTA card: slow-rotating glow */
.cta-card::after{
  animation: rotateGlow 14s linear infinite;
}
@keyframes rotateGlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Stats: numbers pulse gently once revealed */
.stat-num{ transition: text-shadow .3s var(--ease); }
.stats.in-view .stat-num{ animation: numGlow 3.6s ease-in-out infinite; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .cat-card-wide{ grid-column: span 2; }
  .value-grid{ grid-template-columns: repeat(2, 1fr); }
  .process{ grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .process::before{ display: none; }
  .cta-card{ grid-template-columns: 1fr; padding: 2.5rem; }
  .stats{ grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
}

@media (max-width: 720px){
  .nav-links{ display: none; }
  .nav-cta{ display: none; }
  .nav-toggle{ display: flex; }
  .cat-grid{ grid-template-columns: 1fr; }
  .cat-card-wide{ grid-column: span 1; }
  .value-grid{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
  .section{ padding: 4.5rem 1.25rem; }
  .hero{ padding-top: 7rem; }
  .cta-card{ padding: 2rem 1.5rem; }
  .hero-title{ font-size: clamp(2.3rem, 12vw, 3.4rem); white-space: normal; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal]{ opacity: 1; transform: none; }
}