/* ==========================================================================
   ZULTAN TECHNOLOGIES — Premium corporate system
   Monochrome corporate · Terra scoped to TechSphereX · "The Standard Is The Brand"
   ========================================================================== */

:root {
  /* ZULTAN — strict monochrome. Neutral cool-black, no warm cast. */
  --ink:        #000000;
  --ink-raise:  #08080a;
  --ink-panel:  #0f0f12;
  --ink-card:   #141418;
  --ink-line:   #1c1c22;
  --ink-line-2: #2a2a32;
  --grey-dim:   #6a6a72;
  --grey:       #97979f;
  --grey-soft:  #c9c9d0;
  --paper:      #f4f4f2;
  --white:      #ffffff;

  /* Silver — light itself is the only "accent" on the Zultan side. */
  --silver:     #e7e7ec;
  --silver-dim: #b7b7c0;

  /* TERRA — scoped exclusively to .tsx-page. Never used on the monochrome side. */
  --terra:      #c56a3f;
  --terra-soft: #e2895a;
  --terra-glow: #ff9a63;
  --terra-deep: #7d3a20;

  --maxw: 1280px;
  --gutter: clamp(22px, 5vw, 72px);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 78px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--grey-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--terra); color: var(--white); }
::-moz-selection { background: var(--terra); color: var(--white); }

/* Custom cursor -------------------------------------------------------------*/
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot { width: 6px; height: 6px; background: #fff; transition: width .25s var(--ease), height .25s var(--ease); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.5); transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease); }
.cursor-ring.hover { width: 56px; height: 56px; border-color: rgba(255,255,255,.9); }
.cursor-dot.hover { width: 10px; height: 10px; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* Scroll progress bar -------------------------------------------------------*/
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--grey-dim), var(--white));
}

/* Page load curtain ---------------------------------------------------------*/
.curtain .c-mark { width: 64px; height: 64px; color: #fff; opacity: 0; animation: markIn 1s var(--ease) forwards; }
.curtain .c-line { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey-dim); opacity: 0; animation: fadeUp .8s var(--ease) .3s forwards; }
@keyframes markIn { 0% { opacity: 0; transform: scale(.7) rotate(-8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: .8; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .curtain { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* Typography ----------------------------------------------------------------*/
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--white); font-weight: 700; line-height: 1.03; letter-spacing: -.025em; margin: 0; }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase; color: var(--grey-dim);
  margin: 0 0 22px; display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; flex: none; opacity: .6; }

.lede { font-size: clamp(17px, 1.9vw, 21px); color: var(--grey-soft); line-height: 1.6; }

/* Split-text reveal ---------------------------------------------------------*/
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.split-line > span { display: block; }


/* Scroll reveals further down the page (JS-driven, safe because they're below the fold) */
.split-line.in > span { transform: translateY(0); }
.split-line.d1 > span { transition-delay: .08s; }
.split-line.d2 > span { transition-delay: .16s; }
.split-line.d3 > span { transition-delay: .24s; }

/* Generic reveal ------------------------------------------------------------*/
/* Premium scroll reveals: a clean lift + fade that resolves as the element enters
   view. JS adds .in via IntersectionObserver; a safety net reveals anything the
   observer misses so nothing can stay hidden. */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform 1s var(--ease); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .reveal-scale.in { opacity: 1; transform: none; }
.js .reveal-left { opacity: 0; transform: translateX(-42px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .reveal-right { opacity: 0; transform: translateX(42px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .reveal-left.in, .js .reveal-right.in { opacity: 1; transform: none; }
.reveal.in, .reveal-scale.in, .reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-scale, .js .reveal-left, .js .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Layout --------------------------------------------------------------------*/
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section { position: relative; }
.section-pad { padding: clamp(90px, 13vw, 190px) 0; }
.divider { height: 1px; background: var(--ink-line); border: 0; margin: 0; }

/* Header --------------------------------------------------------------------*/
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 400; transition: transform .5s var(--ease); }
.site-header.hidden { transform: translateY(-100%); }
.header-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid transparent; opacity: 0; transition: opacity .5s var(--ease), border-color .5s var(--ease); }
.site-header.scrolled .header-bg { opacity: 1; border-bottom-color: var(--ink-line); }
/* When mobile menu is open, drop the header blur so it can't bleed onto the panel (iOS fix) */
body.menu-open .header-bg { backdrop-filter: none; -webkit-backdrop-filter: none; background: #060608; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo .zmark { width: 32px; height: 32px; color: #fff; transition: transform .5s var(--ease-spring); flex: none; }
.nav-logo:hover .zmark { transform: rotate(-6deg) scale(1.06); }
.nav-logo .wordmark { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-logo .wordmark .wm-svg { height: 12px; width: auto; color: var(--white); display: block; }
.nav-logo .wordmark em { font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: .1em; color: var(--white); text-transform: uppercase; font-style: normal; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links > a { font-size: 14px; letter-spacing: .01em; color: var(--grey); padding: 9px 16px; border-radius: 2px; transition: color .3s var(--ease); position: relative; }
.nav-links > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.nav-links > a:hover { color: var(--white); } .nav-links > a:hover::after { transform: scaleX(1); }
.nav-links > a.active { color: var(--white); } .nav-links > a.active::after { transform: scaleX(1); background: var(--white); }
.nav-cta { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--ink) !important; background: var(--white); padding: 11px 22px !important; border-radius: 2px; overflow: hidden; position: relative; }
.nav-cta::after { display: none !important; }
.nav-cta span { position: relative; z-index: 1; transition: color .35s var(--ease); }
.nav-cta::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .4s var(--ease); }
.nav-cta:hover::before { transform: translateY(0); } .nav-cta:hover span { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; z-index: 350; position: relative; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Buttons -------------------------------------------------------------------*/
.btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .02em; padding: 16px 32px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; position: relative; overflow: hidden; transition: transform .3s var(--ease); }
.btn span, .btn .arrow { position: relative; z-index: 1; }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn-primary { background: var(--white); color: var(--ink); }
.btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, #d8d8d4, #fff); transform: translateX(-101%); transition: transform .5s var(--ease); }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary:hover { transform: translateY(-3px); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--ink-line-2); }
.btn-ghost::before { content: ""; position: absolute; inset: 0; background: var(--ink-raise); transform: translateY(101%); transition: transform .45s var(--ease); z-index: 0; }
.btn-ghost span, .btn-ghost .arrow { transition: color .35s var(--ease); color: var(--white); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--white); }
.btn-ghost:hover span, .btn-ghost:hover .arrow { color: var(--white); }
.btn-terra { background: var(--terra); color: #180d06; }
.btn-terra::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--terra), var(--terra-soft)); transform: translateX(-101%); transition: transform .5s var(--ease); }
.btn-terra:hover::before { transform: translateX(0); }
.btn-terra:hover { transform: translateY(-3px); }

/* Hero ----------------------------------------------------------------------*/
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-layers { position: absolute; inset: 0; z-index: 0; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--ink-line) 1px, transparent 1px), linear-gradient(to bottom, var(--ink-line) 1px, transparent 1px); background-size: 90px 90px; mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, #000 25%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, #000 25%, transparent 76%); opacity: .55; will-change: transform; }
.hero-aurora { position: absolute; top: -20%; left: 50%; width: 1100px; height: 800px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255,255,255,.07), transparent 62%); will-change: transform; pointer-events: none; }
.hero-mark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(52vw, 640px); color: #fff; opacity: .04; z-index: 0; will-change: transform; }
.hero-inner { position: relative; z-index: 2; padding-top: var(--nav-h); padding-bottom: 60px; width: 100%; }
.hero h1 { font-size: clamp(46px, 8.4vw, 118px); letter-spacing: -.035em; line-height: 1.0; margin-bottom: 30px; }
.hero h1 .muted { color: var(--grey-dim); }
.tsx-word { color: var(--white); }
/* The "Sphere" in TechSphereX / SphereAI is always terra, everywhere. */
.tsx-word .sph, .sph { color: var(--terra-soft); }
.hero .lede { max-width: 580px; margin-bottom: 44px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
@keyframes scrollLine { 0% { top: -50%; } 100% { top: 100%; } }

/* ============================================================
   AMBIENT LIFE — subtle breathing background system
   Monochrome by default; terra variant scoped to TechSphereX.
   All motion is slow, soft, and honours reduced-motion.
   ============================================================ */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Premium ambient: a fine precision grid + one whisper-soft radial glow.
   Restraint over spectacle. Motion is almost imperceptible, felt not seen. */

/* Fine grid, fixed, extremely low contrast (Stripe / Linear style) */
.ambient .weave {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
}

/* A single soft glow that drifts very slowly over a long cycle - barely perceptible */
.ambient .orb {
  position: absolute; border-radius: 50%; filter: blur(100px);
  mix-blend-mode: screen; will-change: transform;
}
.ambient .orb-a {
  width: 70vw; height: 70vw; top: -25%; left: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.05), transparent 60%);
  animation: glow-drift 40s ease-in-out infinite;
}
.ambient .orb-b, .ambient .orb-c { display: none; }

/* TechSphereX: the same restraint, but warm. A slow, quiet terra presence. */
.tsx-page .ambient .weave {
  background-image:
    linear-gradient(to right, rgba(226,137,90,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,137,90,.03) 1px, transparent 1px);
}
.tsx-page .ambient .orb-a {
  background: radial-gradient(circle, rgba(226,137,90,.11), transparent 60%);
  animation: glow-drift 40s ease-in-out infinite, glow-pulse 6s ease-in-out infinite;
}

@keyframes glow-drift {
  0%,100% { transform: translate(-50%, 0) scale(1); }
  50%     { transform: translate(-42%, 4%) scale(1.08); }
}
/* Only on TechSphereX: an almost-subliminal brightening, like a slow pulse of life */
@keyframes glow-pulse {
  0%,100% { opacity: .8; }
  50%     { opacity: 1; }
}

/* content sits above the ambient layer (header keeps its own fixed z-index) */
main, footer, section:not(.ambient) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ambient .orb { animation: none !important; }
}

/* Language switcher */
.lang-switch { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--grey-dim); border: 1px solid var(--ink-line-2); border-radius: 3px; padding: 6px 11px; transition: color .3s var(--ease), border-color .3s var(--ease); align-self: center; }
.lang-switch:hover { color: var(--white); border-color: var(--grey); }
.lang-switch::after { display: none !important; }
@media (max-width: 900px) {
  .nav-links > a.lang-switch { display: inline-block; width: auto; align-self: flex-start; margin-top: 20px; border-bottom: 1px solid var(--ink-line-2); }
}