/* ==========================================================================
   WP-Software — coming soon
   Plain CSS. GPU-friendly motion only (transform / opacity / filter).
   ========================================================================== */

:root{
  --bg-0:#0A0B10;
  --bg-1:#12141F;
  --bg-2:#171A28;

  --ink:#E8EAF2;
  --ink-dim:#9AA0BA;
  --ink-faint:#6B7192;

  --cyan:#5EEAD4;
  --violet:#8B5CF6;
  --amber:#FBBF24;

  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.034);
  --glass-hi:rgba(255,255,255,.062);

  --font-sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,64px);
  --radius:16px;
}

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

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

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

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

/* ==========================================================================
   1. Background effect layers
   ========================================================================== */

.fx{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}

/* --- 1a. gradient mesh, slow hue drift over 60s --- */
.fx__mesh{
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(42% 46% at 18% 18%, rgba(139,92,246,.34) 0%, transparent 62%),
    radial-gradient(38% 42% at 82% 26%, rgba(94,234,212,.22) 0%, transparent 60%),
    radial-gradient(46% 50% at 66% 84%, rgba(99,102,241,.26) 0%, transparent 64%),
    radial-gradient(34% 38% at 24% 78%, rgba(251,191,36,.10) 0%, transparent 58%),
    linear-gradient(158deg,var(--bg-0) 0%,var(--bg-1) 52%,#0D0E16 100%);
  filter:blur(28px) saturate(122%);
  animation:mesh-drift 60s linear infinite;
  will-change:transform,filter;
}

@keyframes mesh-drift{
  0%  {transform:translate3d(0,0,0) scale(1.02);   filter:blur(28px) saturate(122%) hue-rotate(0deg)}
  25% {transform:translate3d(-2.2%,1.6%,0) scale(1.06); filter:blur(30px) saturate(132%) hue-rotate(14deg)}
  50% {transform:translate3d(1.8%,-1.8%,0) scale(1.04); filter:blur(26px) saturate(118%) hue-rotate(-10deg)}
  75% {transform:translate3d(2.4%,1.2%,0) scale(1.07); filter:blur(31px) saturate(130%) hue-rotate(8deg)}
  100%{transform:translate3d(0,0,0) scale(1.02);   filter:blur(28px) saturate(122%) hue-rotate(0deg)}
}

/* --- 1b. dot matrix + faint grid, slow parallax --- */
.fx__grid{
  position:absolute;
  inset:-12% -12% -12% -12%;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0),
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:38px 38px, 152px 152px, 152px 152px;
  opacity:.5;
  mask-image:radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 88%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 88%);
  animation:grid-parallax 44s ease-in-out infinite;
  will-change:transform;
}

@keyframes grid-parallax{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(-30px,-24px,0)}
}

/* --- 1c. floating modular blocks (3D) --- */
.fx__blocks{
  position:absolute;
  inset:0;
  perspective:1100px;
  perspective-origin:50% 42%;
}

.blk{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  margin:calc(var(--s) / -2);
  opacity:var(--op);
  animation:blk-drift var(--drift-dur) ease-in-out var(--delay) infinite alternate;
  will-change:transform;
}

/* pair-snap layer: two partners nudge together, hold, release */
.blk__snap{
  width:100%;height:100%;
  animation:blk-snap var(--snap-dur,26s) ease-in-out var(--snap-delay,0s) infinite;
}
.blk:not([data-pair]) .blk__snap{animation:none}

.blk__i{
  width:100%;
  height:100%;
  border-radius:calc(var(--s) * .22);
  transform-style:preserve-3d;
  animation:blk-spin var(--spin-dur) linear var(--delay) infinite;
  will-change:transform;

  background:
    linear-gradient(150deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 44%, rgba(255,255,255,.07) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 26px rgba(255,255,255,.05),
    0 0 34px -6px var(--glow);
}

/* inner "circuit" seam */
.blk__i::before{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:calc(var(--s) * .10);
  border:1px solid var(--glow);
  opacity:.42;
}
.blk__i::after{
  content:"";
  position:absolute;
  left:50%;top:14%;bottom:14%;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--glow),transparent);
  opacity:.5;
}

@keyframes blk-drift{
  0%  {transform:translate3d(0,0,0)}
  100%{transform:translate3d(var(--dx),var(--dy),0)}
}

@keyframes blk-spin{
  0%  {transform:rotateX(0deg)    rotateY(0deg)    rotateZ(0deg)}
  100%{transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}
}

@keyframes blk-snap{
  0%,42%   {transform:translate3d(0,0,0)}
  50%,58%  {transform:translate3d(var(--snap-x),var(--snap-y),0)}
  66%,100% {transform:translate3d(0,0,0)}
}

/* --- 1d. ambient particle field --- */
.fx__particles{position:absolute;inset:0}

.pt{
  position:absolute;
  left:var(--x);
  bottom:-12px;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 var(--halo) var(--c);
  opacity:0;
  animation:pt-rise var(--dur) linear var(--delay) infinite;
  will-change:transform,opacity;
}

@keyframes pt-rise{
  0%  {transform:translate3d(0,0,0) scale(.6);            opacity:0}
  8%  {                                                    opacity:var(--op)}
  50% {transform:translate3d(var(--dx),-52vh,0) scale(1)}
  88% {                                                    opacity:var(--op)}
  100%{transform:translate3d(calc(var(--dx) * 1.7),-108vh,0) scale(.75); opacity:0}
}

/* --- 1e. cursor-reactive glow (pointer devices only, enabled by JS) --- */
.fx__pointer{
  position:absolute;
  top:0;left:0;
  width:620px;height:620px;
  margin:-310px 0 0 -310px;
  border-radius:50%;
  background:radial-gradient(circle,
              rgba(94,234,212,.13) 0%,
              rgba(139,92,246,.09) 34%,
              transparent 68%);
  opacity:0;
  transition:opacity .45s ease;
  will-change:transform;
}
body.has-pointer .fx__pointer{opacity:1}

.fx__vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(120% 100% at 50% 0%, transparent 42%, rgba(4,5,9,.62) 100%);
}

/* ==========================================================================
   2. Shell / layout
   ========================================================================== */

.shell{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:clamp(56px,10vh,120px) var(--pad) 0;
}

.section-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:14px;
}
.section-label::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(to right,var(--line),transparent);
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Transparency is baked into the .webp files (see src/build_images.py), so
   these composite on any backdrop without needing a blend mode. */
.hero__module{
  width:clamp(150px,26vw,272px);
  height:auto;
  margin-bottom:clamp(14px,3vw,30px);
  filter:drop-shadow(0 22px 50px rgba(94,234,212,.24));
  /* Delayed, with the default fill-mode of `none`, so the entrance transition
     owns `transform` until the slide-up has settled — then bob takes over. */
  animation:bob 9s ease-in-out 1.1s infinite;
  will-change:transform;
}

@keyframes bob{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-13px,0) rotate(1.4deg)}
}

/* --- wordmark lockup --- */
.wordmark{
  font-size:clamp(2.35rem,8.4vw,5.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
}

.lockup{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:.10em;
}

.lockup__slab{
  display:inline-flex;
  align-items:center;
  padding:.10em .20em .13em;
  border-radius:.22em;
  background:linear-gradient(150deg,rgba(94,234,212,.16),rgba(139,92,246,.16));
  border:1px solid rgba(94,234,212,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 34px -8px rgba(94,234,212,.55);
  color:var(--cyan);
}

.lockup__bracket{
  color:var(--violet);
  opacity:.72;
  font-weight:500;
}
.lockup__bracket--l{margin-right:.04em}
.lockup__bracket--r{margin-left:.04em}

.lockup__word{
  background:linear-gradient(180deg,#FFFFFF 0%,#B9BFDA 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* blinking terminal cursor */
.lockup__caret{
  display:inline-block;
  width:.075em;
  height:.78em;
  margin-left:.10em;
  background:var(--cyan);
  border-radius:1px;
  box-shadow:0 0 12px var(--cyan);
  animation:caret-blink 1.15s steps(1,end) infinite;
}

@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* --- domain --- */
.domain{
  margin-top:clamp(14px,2.2vw,22px);
  font-family:var(--font-mono);
  font-size:clamp(.78rem,2.3vw,1.02rem);
  letter-spacing:.14em;
  color:var(--ink-dim);
  display:flex;
  align-items:center;
  gap:.6em;
}
.domain__glyph{
  color:var(--violet);
  opacity:.85;
  animation:glyph-pulse 3.6s ease-in-out infinite;
}
@keyframes glyph-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* --- tagline --- */
.tagline{
  margin-top:clamp(20px,3vw,30px);
  max-width:34ch;
  font-size:clamp(1.02rem,2.7vw,1.42rem);
  font-weight:500;
  color:var(--ink-dim);
  line-height:1.5;
  text-wrap:balance;
}
/* Emphasis by colour only — an underline here reads as a hyperlink. */
.tagline em{
  font-style:normal;
  color:var(--ink);
}

/* --- coming soon / under construction --- */
.status{
  margin-top:clamp(34px,6vw,58px);
  display:flex;
  align-items:center;
  gap:clamp(14px,3vw,26px);
  text-align:left;
  padding:clamp(16px,2.6vw,24px) clamp(20px,3.4vw,32px);
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  max-width:620px;
}

.status__icon{
  width:clamp(52px,11vw,84px);
  height:auto;
  flex:0 0 auto;
  filter:drop-shadow(0 8px 24px rgba(251,191,36,.34));
  animation:bob 6.4s ease-in-out infinite .4s;
  will-change:transform;
}

.status__title{
  font-size:clamp(1.18rem,3.3vw,1.62rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--amber);
}
.status__sub{
  margin-top:5px;
  font-size:clamp(.85rem,2.1vw,.97rem);
  color:var(--ink-dim);
  line-height:1.5;
}

/* ==========================================================================
   4. Service pillars
   ========================================================================== */

.pillars{margin-top:clamp(70px,12vh,132px)}

/* Explicit column counts rather than auto-fit: six cards must land 3x2 or
   2x3, never 4+2 with an orphan row. */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(13px,1.8vw,20px);
}
@media (min-width:620px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
}

.card{
  position:relative;
  padding:clamp(20px,2.5vw,26px);
  border-radius:var(--radius);
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  overflow:hidden;
  transition:transform .34s cubic-bezier(.22,1,.36,1),
             background-color .34s ease,
             border-color .34s ease,
             box-shadow .34s ease;
  will-change:transform;
}

/* gradient border sheen on hover */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,var(--cyan),var(--violet) 52%,transparent 82%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .34s ease;
  pointer-events:none;
}

@media (hover:hover){
  .card:hover{
    transform:translate3d(0,-6px,0);
    background:var(--glass-hi);
    border-color:transparent;
    box-shadow:0 22px 50px -22px rgba(0,0,0,.85),
               0 0 42px -18px rgba(94,234,212,.5);
  }
  .card:hover::before{opacity:1}
  .card:hover .card__icon{
    color:var(--cyan);
    border-color:rgba(94,234,212,.44);
    transform:translate3d(0,-2px,0);
  }
}

.card__icon{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border-radius:11px;
  margin-bottom:15px;
  color:var(--ink-dim);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-soft);
  transition:color .34s ease,border-color .34s ease,transform .34s ease;
}
.card__icon svg{width:21px;height:21px}

.card__title{
  font-size:clamp(1rem,2.2vw,1.09rem);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
}
.card__body{
  margin-top:6px;
  font-size:.9rem;
  color:#8F96B2;              /* ~7:1 on the card — --ink-faint was too low */
  line-height:1.55;
}

/* ==========================================================================
   5. Decorative band
   ========================================================================== */

.band{
  margin-top:clamp(56px,9vh,96px);
  display:flex;
  justify-content:center;
}
.band img{
  width:min(100%,880px);
  height:auto;
  opacity:.55;
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 96%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 96%);
  animation:bob 13s ease-in-out infinite 1s;
  will-change:transform;
}

/* ==========================================================================
   6. Notify
   ========================================================================== */

.notify{
  margin-top:clamp(20px,4vh,48px);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.notify__title{
  font-size:clamp(1.3rem,3.6vw,1.95rem);
  font-weight:700;
  letter-spacing:-.025em;
}
.notify__sub{
  margin-top:8px;
  font-size:.93rem;
  color:var(--ink-faint);
}

.notify__form{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:min(100%,520px);
}

.notify__input{
  flex:1 1 240px;
  min-width:0;
  padding:14px 17px;
  font-family:var(--font-mono);
  font-size:.92rem;
  color:var(--ink);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .28s ease,background-color .28s ease,box-shadow .28s ease;
}
.notify__input::placeholder{color:#5B6180}
.notify__input:focus{
  outline:none;
  border-color:rgba(94,234,212,.55);
  background:rgba(255,255,255,.062);
  box-shadow:0 0 0 3px rgba(94,234,212,.13);
}
.notify__input[aria-invalid="true"]{
  border-color:rgba(248,113,113,.6);
  box-shadow:0 0 0 3px rgba(248,113,113,.12);
}

.notify__button{
  flex:0 0 auto;
  padding:14px 26px;
  font-family:var(--font-sans);
  font-size:.93rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#07131A;
  background:linear-gradient(135deg,var(--cyan),#7DD3FC 58%,var(--violet));
  border:0;
  border-radius:12px;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,filter .22s ease;
  box-shadow:0 10px 30px -12px rgba(94,234,212,.75);
}
@media (hover:hover){
  .notify__button:hover{transform:translate3d(0,-2px,0);filter:brightness(1.07);
    box-shadow:0 16px 38px -12px rgba(94,234,212,.9)}
}
.notify__button:active{transform:translate3d(0,0,0)}
.notify__button:disabled{opacity:.55;cursor:default;transform:none;filter:none}

.notify__msg{
  margin-top:14px;
  min-height:1.4em;
  font-family:var(--font-mono);
  font-size:.84rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
  opacity:0;
  transform:translate3d(0,5px,0);
  transition:opacity .38s ease,transform .38s ease;
}
.notify__msg.is-shown{opacity:1;transform:translate3d(0,0,0)}
.notify__msg.is-ok{color:var(--cyan)}
.notify__msg.is-err{color:#F87171}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.footer{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:clamp(70px,12vh,128px) auto 0;
  padding:26px var(--pad) clamp(34px,6vh,60px);
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.footer__copy{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--ink-dim);
}
.footer__disclaimer{
  margin:9px auto 0;
  max-width:62ch;
  font-size:.78rem;
  line-height:1.6;
  color:#767D9B;             /* legal text still has to be readable */
}

/* ==========================================================================
   8. Entrance reveal
   ========================================================================== */

/* Only hide the pre-entrance state when JS is actually running (the <head>
   sets .js). Without this a no-JS visitor gets a permanently blank page.

   This is a TRANSITION, not an animation, and deliberately so: the settled
   state (`is-ready`) declares opacity:1. If the motion never actually plays —
   a backgrounded tab freezes animations outright — the content still ends up
   visible instead of stuck at opacity:0. */
.js .reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .82s cubic-bezier(.22,1,.36,1),
             transform .82s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 105ms + 90ms);
}
.js body.is-ready .reveal{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width:560px){
  .status{
    flex-direction:column;
    text-align:center;
    align-items:center;
  }
  .notify__form{flex-direction:column}
  .notify__button{width:100%}
  .lockup{gap:.06em}
  .fx__grid{background-size:30px 30px,120px 120px,120px 120px}
}

@media (min-width:1800px){
  .shell,.footer{max-width:1320px}
  .tagline{max-width:38ch}
}

/* ==========================================================================
   10. Reduced motion — freeze everything decorative
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .fx__blocks,
  .fx__particles,
  .fx__pointer{display:none}

  .fx__mesh{filter:blur(28px) saturate(112%);transform:none}
  .fx__grid{opacity:.34;transform:none}

  .lockup__caret{opacity:1;animation:none}
  .domain__glyph{opacity:.85}

  .reveal,
  .js .reveal,
  .js body.is-ready .reveal{opacity:1;transform:none;animation:none;transition:none}

  .card:hover{transform:none}
}