/* ═══════════════════════════════════════════════
   Manoj Builds — shared foundation
   Fonts are self-hosted: no CDN, no flash of
   fallback text, works offline.
   ═══════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap
}
@font-face{
  font-family:"Space Grotesk";src:url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap
}

:root{
  --ink:#04060E; --ink2:#0A1024;
  --blue:#2B6BFF; --blue2:#6E9BFF; --cyan:#3ED8FF;
  --orange:#F79219; --amber:#FFC25C;
  --paper:#EEF3FF; --muted:#8B99B8;
  --line:rgba(110,155,255,.22);
  --display:"Archivo","Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the logo's stretched, heavy lettering */
  --display-set:"wdth" 125,"wght" 900;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;min-height:100%;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-weight:300;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
::selection{background:var(--orange);color:#0B1226}

/* ── ambient field ─────────────────────────── */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field .wash{
  position:absolute;left:50%;top:40%;translate:-50% -50%;
  width:min(160vh,1500px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(43,107,255,.24),rgba(43,107,255,.05) 44%,transparent 66%)
}
.spark{position:absolute;width:3px;height:3px;border-radius:50%}
.dot{
  position:fixed;z-index:80;width:9px;height:9px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 20px 5px rgba(62,216,255,.5);translate:-50% -50%;
  pointer-events:none;opacity:0;transition:opacity .3s
}
@media (pointer:fine){.dot.on{opacity:.85}}

.page{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:22px clamp(16px,3.5vw,44px) 48px}

/* ── primary top navigation ─────────────────── */
.top-center-nav{
  position:fixed;left:50%;top:18px;translate:-50% 0;z-index:110;
  display:flex;align-items:center;gap:4px;padding:4px;
  border:1px solid rgba(110,155,255,.25);border-radius:999px;
  background:rgba(7,11,25,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.28)
}
.top-center-nav a{
  display:block;padding:8px 15px;border-radius:999px;color:#9EACCA;text-decoration:none;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s ease,background .2s ease,box-shadow .2s ease
}
.top-center-nav a:hover,.top-center-nav a:focus-visible{color:#fff;background:rgba(110,155,255,.11);outline:none}
.top-center-nav a[aria-current="page"]{
  color:#0B1226;background:linear-gradient(180deg,var(--amber),var(--orange));
  box-shadow:0 4px 14px rgba(247,146,25,.2)
}
.has-top-nav .page{padding-top:76px}
@media(max-width:640px){
  .top-center-nav{top:12px}
  .top-center-nav a{padding:7px 12px;font-size:.66rem}
  .has-top-nav .page{padding-top:66px}
}

/* ── masthead ──────────────────────────────── */
.masthead{display:flex;justify-content:flex-end;align-items:center;margin-bottom:6px}

/* ── the badge, with its gear lifted out and spun ──
   The gear was inpainted out of logo.webp; gear.webp
   is the same gear completed to a full cog and laid
   back in the exact spot it came from. Percentages
   are measured from the artwork, so it stays locked
   in place at any size. */
.logo{position:relative;display:inline-block;line-height:0}
.logo > .art{display:block;width:100%;height:auto}
.logo > .cogwrap{
  position:absolute;left:51.79%;top:79.86%;width:16.78%;
  aspect-ratio:1;translate:-50% -50%;
  /* clipped at the banner's lower edge, so teeth turn up
     from behind it exactly as the artwork implies */
  clip-path:inset(37.5% 0 0 0)
}
.logo > .cogwrap > .cog{display:block;width:100%;height:auto}
.cog{animation:spin 16s linear infinite;transform-origin:50% 50%}
.cog.slow{animation-duration:30s}
@keyframes spin{to{rotate:360deg}}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}
.status{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:#C6D3EE;
  border:1px solid rgba(110,155,255,.26);border-radius:999px;padding:7px 14px;
  background:rgba(10,16,36,.55);flex:none
}
.led{width:7px;height:7px;border-radius:50%;background:#3BE08A;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,224,138,.55)}70%{box-shadow:0 0 0 8px rgba(59,224,138,0)}}

/* ── shared components ─────────────────────── */
/* floating connect button — fixed bottom-right */
.floatcta{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px 10px 10px;border-radius:999px;text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:.96rem;color:#0A0A12;
  background:linear-gradient(180deg,var(--amber),var(--orange));
  box-shadow:0 10px 26px rgba(247,146,25,.4),0 4px 0 #A75B06;
  transition:translate .12s,box-shadow .12s,filter .2s
}
.floatcta:hover{filter:brightness(1.06)}
.floatcta:active{translate:0 3px;box-shadow:0 5px 14px rgba(247,146,25,.35),0 1px 0 #A75B06}
.floatcta:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.floatcta .wa{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
  background:#25D366
}
.floatcta .wa svg{width:17px;height:17px;display:block}
@media (max-width:640px){
  .floatcta{right:14px;bottom:14px;padding:9px 18px 9px 9px;font-size:.86rem;gap:8px}
  .floatcta .wa{width:28px;height:28px}
  .floatcta .wa svg{width:15px;height:15px}
}

/* ── footer ────────────────────────────────── */
.foot{
  margin-top:64px;padding-top:26px;border-top:1px solid rgba(110,155,255,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  color:#57647F;font-size:.82rem;letter-spacing:.03em
}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:#8B99B8;text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--paper);outline:none}
.foot .rule{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .led,.spark,.cog{animation:none}
  *{transition-duration:.01ms !important}
}

/* v39: restore clean centered Home / Builds switch */
.top-center-nav{
  position:fixed !important;
  top:16px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  translate:none !important;
  z-index:140 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr;
  align-items:center;
  width:198px;
  min-width:198px;
  gap:3px;
  padding:4px;
  margin:0 !important;
  border:1px solid rgba(104,139,205,.34);
  border-radius:999px;
  background:rgba(5,10,25,.90);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.top-center-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 12px !important;
  border-radius:999px;
  color:#aeb9d2;
  text-decoration:none;
  font-size:.75rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.top-center-nav a[aria-current="page"]{
  color:#0a1020;
  background:linear-gradient(180deg,#ffb33a 0%,#ff951d 100%);
  box-shadow:0 4px 13px rgba(255,153,31,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
@media(max-width:640px){
  .top-center-nav{
    top:12px !important;
    width:188px;
    min-width:188px;
  }
  .top-center-nav a{height:36px;font-size:.70rem;padding:0 10px !important}
}