/**
 * skynet-web3.css — Web3 front-page enhancements, THEME-TOKEN based (2026-07-22, v2)
 * v1 mistake: hard-coded a dark palette on a light-mode-first theme -> invisible text.
 * v2: uses the theme-maker design tokens (--color-surface/-text/-text-muted/-border/
 * -primary-rgb) so every surface + text is readable in LIGHT mode and adapts to DARK mode.
 * Neon web3 gradients are used ONLY for decorative accents (hero network, flow rail,
 * step badges, timeline spine) which pop on both backgrounds.
 * Direction "Neural Constellation" (advisor-picked: GPT-5.6 Sol, 2026-07-22).
 */
:root{
  --sky-cy:#0aa2ff; --sky-vi:#7b5bff; --sky-gr:#12c98a;
  --sky-grad:linear-gradient(120deg,#0aa2ff,#7b5bff 58%,#12c98a);
}

/* ---------- HERO: subtle animated network on the theme's own light hero ---------- */
/* No dark band, no scrim: the theme hero stays light/centered and readable. */
.platform-hero{position:relative;overflow:hidden;isolation:isolate}
/* High specificity + !important: a global rule was forcing this canvas to
   position:relative, dropping it into normal flow and pushing the hero text off-screen. */
.platform-hero canvas.sky-hero-net{position:absolute!important;top:0!important;left:0!important;
  z-index:0!important;pointer-events:none;display:block!important;margin:0!important}
.platform-hero__content{position:relative;z-index:2}
/* extra brand glow behind the network for depth (does not touch text legibility) */
.platform-hero .sky-hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(820px 460px at 82% 12%, rgba(var(--color-primary-rgb),.10), transparent 62%),
    radial-gradient(720px 420px at 10% 92%, rgba(18,201,138,.07), transparent 60%);}

/* ---------- shared section shell (token-based) ---------- */
.sky-sec{position:relative;padding:74px 0}
.sky-sec .container,.sky-sec .ag-container{max-width:1180px;margin:0 auto;padding:0 24px}
.sky-sec--tint{background:var(--color-surface-alt)}
.sky-eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-primary);font-weight:700;padding:6px 14px;border:1px solid var(--color-border);
  border-radius:999px;background:rgba(var(--color-primary-rgb),.06)}
.sky-h{max-width:760px;margin:0 auto 44px;text-align:center}
.sky-h h2{font-family:var(--font-heading);font-size:clamp(27px,3.6vw,42px);font-weight:800;
  letter-spacing:-.02em;margin:15px 0 12px;line-height:1.12;color:var(--color-text)}
.sky-h p{color:var(--color-text-muted);font-size:16.5px;line-height:1.62}
.sky-h em{color:var(--color-primary);font-style:normal;font-weight:600}

/* ---------- Prompt -> Analyzed Logic (connected pipeline) ---------- */
.sky-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:16px;
  box-shadow:0 12px 40px rgba(var(--color-text-rgb),.07);overflow:hidden}
.sky-flow__rail{position:absolute;left:8%;right:8%;top:70px;height:3px;background:var(--sky-grad);
  opacity:.9;border-radius:3px;z-index:0}
.sky-flow__pulse{position:absolute;top:70px;left:8%;width:12px;height:12px;border-radius:50%;
  background:var(--sky-gr);box-shadow:0 0 16px var(--sky-gr);transform:translate(-50%,-50%);z-index:2;
  animation:sky-run 5.5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes sky-run{0%{left:8%}18%{left:29%}42%{left:50%}68%{left:71%}100%{left:92%}}
.sky-flow canvas.sky-flow-cv{position:absolute!important;top:0!important;left:0!important;pointer-events:none;z-index:2;display:block!important;margin:0!important}
.sky-step{position:relative;z-index:1;padding:16px 16px 20px;text-align:center}
.sky-step__n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  font-weight:800;font-size:17px;color:#fff;background:var(--sky-grad);
  box-shadow:0 6px 18px rgba(var(--color-primary-rgb),.35);transition:transform .3s ease,box-shadow .3s ease}
.sky-step h3{font-size:16px;font-weight:700;color:var(--color-text);margin-bottom:7px}
.sky-step p{font-size:13.5px;line-height:1.5;color:var(--color-text-muted)}
.sky-step--active .sky-step__n{transform:scale(1.10);box-shadow:0 0 0 6px rgba(var(--color-primary-rgb),.14),0 8px 22px rgba(18,201,138,.5)}
.sky-flow__note{margin:20px auto 0;max-width:840px;text-align:center;font-size:14.5px;color:var(--color-text-muted);line-height:1.6}
.sky-flow__note b{color:var(--color-text);font-weight:700}

/* ---------- Demo grid ---------- */
.sky-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sky-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:18px;padding:26px;
  box-shadow:0 8px 30px rgba(var(--color-text-rgb),.05);position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.sky-card:hover{transform:translateY(-4px);border-color:var(--color-primary);
  box-shadow:0 16px 46px rgba(var(--color-primary-rgb),.18)}
.sky-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--sky-grad);
  opacity:0;transition:opacity .25s ease}
.sky-card:hover::before{opacity:1}
.sky-card__ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  font-size:25px;background:rgba(var(--color-primary-rgb),.09);border:1px solid var(--color-border)}
.sky-card__tag{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-primary);font-weight:700}
.sky-card h3{font-size:19px;font-weight:700;color:var(--color-text);margin:6px 0 9px;line-height:1.22}
.sky-card p{font-size:14.5px;line-height:1.6;color:var(--color-text-muted)}
.sky-card__pf{margin-top:16px;font-size:15px;font-weight:800;color:var(--color-primary);
  border-top:1px solid var(--color-border);padding:13px 12px 0;line-height:1.4}
.sky-card__pf::before{content:"\2713  ";font-weight:800;color:var(--sky-gr)}

/* section-level evidence CTA (advisor #2: make claims inspectable) */
.sky-demos-cta{margin:34px auto 0;max-width:760px;text-align:center}
.sky-demos-cta a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  color:#fff;background:var(--sky-grad);padding:13px 26px;border-radius:12px;
  box-shadow:0 10px 30px rgba(var(--color-primary-rgb),.30);transition:transform .2s ease}
.sky-demos-cta a:hover{transform:translateY(-2px)}
.sky-demos-cta p{margin-top:12px;font-size:13.5px;color:var(--color-text-muted)}

/* under-the-hood stack strip */
.sky-uth{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sky-uth span{font-size:13px;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:9px;
  padding:7px 13px;background:var(--color-surface)}
.sky-uth b{color:var(--color-text)}

/* ---------- Evolution timeline ---------- */
.sky-tl{max-width:840px;margin:0 auto;position:relative;padding-left:30px}
.sky-tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--sky-grad)}
.sky-tli{position:relative;padding:0 0 26px 28px}
.sky-tli::before{content:"";position:absolute;left:-28px;top:5px;width:16px;height:16px;border-radius:50%;
  background:var(--color-bg);border:3px solid var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.14)}
.sky-tli b{color:var(--color-text);font-size:16px;font-weight:700}
.sky-tli span{display:block;color:var(--color-text-muted);font-size:14.5px;line-height:1.55;margin-top:3px}

/* ============================================================================
   FLEET 3D — real three.js constellation of the Skynet fleet (2026-07-22)
   Lives on the dark ".skynet-showcase" engine-room band, so nodes glow. The
   accessible HTML node list (.fleet3d__data) is the single source of truth and
   the no-WebGL / reduced-motion / no-JS fallback.
   ============================================================================ */
.fleet3d{position:relative;max-width:1000px;margin:38px auto 30px}

/* the WebGL stage is hidden until JS confirms three.js + WebGL (--is3d) */
.fleet3d__stage{display:none;position:relative;width:100%;
  height:clamp(360px,56vw,540px);border-radius:22px;overflow:hidden;
  /* deep-navy "engine room" surface (advisor: kill the electric-blue debug viewport).
     !important defeats a theme rule that was forcing --color-primary onto this div. */
  background:
    radial-gradient(56% 50% at 50% 44%, rgba(42,120,230,.15), transparent 72%),
    linear-gradient(180deg,#0a0e24 0%,#0c1234 58%,#0a0e26 100%) !important;
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 0 120px rgba(10,60,150,.10)}
.fleet3d--is3d .fleet3d__stage{display:block}
.fleet3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y}
.fleet3d__canvas:active{cursor:grabbing}

/* crisp HTML hover tooltip (never in-canvas text) */
.fleet3d__tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  transform:translate(-50%,calc(-100% - 18px));min-width:150px;max-width:250px;
  padding:11px 13px;border-radius:12px;text-align:left;
  background:rgba(10,14,39,.92);border:1px solid rgba(120,150,255,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.fleet3d__tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);background:rgba(10,14,39,.92);
  border-right:1px solid rgba(120,150,255,.35);border-bottom:1px solid rgba(120,150,255,.35)}
.fleet3d__tip-t{display:block;font-weight:800;font-size:14px;color:#fff;letter-spacing:.01em}
.fleet3d__tip-m{display:block;font-size:12px;font-weight:700;margin-top:3px;
  color:#7fd0ff;font-variant-numeric:tabular-nums}
.fleet3d__tip-r{display:block;font-size:12px;line-height:1.45;margin-top:5px;color:rgba(255,255,255,.72)}

/* projected HTML label layer — crisp typography over the WebGL (no canvas text) */
.fleet3d__labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.fleet3d__lbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  white-space:nowrap;text-align:center;transition:opacity .2s ease;
  padding:3px 9px;border-radius:8px;background:rgba(5,8,20,.85);border:1px solid rgba(150,180,255,.32);
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.fleet3d__lbl span{display:block;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.fleet3d__lbl small{display:block;margin-top:1px;font-size:9.5px;font-weight:700;
  letter-spacing:.01em;color:#8fd4ff;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.fleet3d__lbl--lane span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.fleet3d__lbl--adv span,.fleet3d__lbl--bus span{color:rgba(255,255,255,.76)}
.fleet3d__lbl--bus small{color:rgba(255,255,255,.5)}

.fleet3d__hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;
  pointer-events:none;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.42)}

/* lane legend (shown for both 3D + fallback) */
.fleet3d__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 16px;margin:18px auto 0;max-width:840px}
.fleet3d__lg{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 13px}
.fleet3d__lg i{width:11px;height:11px;border-radius:50%;background:var(--dot,#2a9dff);box-shadow:0 0 10px var(--dot,#2a9dff);flex:0 0 auto}
.fleet3d__lg b{color:rgba(255,255,255,.5);font-weight:700}

/* accessible node list — SOURCE OF TRUTH; also the no-WebGL / no-JS fallback */
.fleet3d__data{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fleet3d--is3d .fleet3d__data{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.fleet3d__data li{position:relative;padding:14px 15px 14px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);overflow:hidden}
.fleet3d__data li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lc,#2a9dff);box-shadow:0 0 14px var(--lc,#2a9dff)}
.fleet3d__data li[data-kind="orchestrator"]{grid-column:1/-1;background:rgba(42,157,255,.09);border-color:rgba(42,157,255,.3)}
.fleet3d__dl{display:block;font-weight:800;font-size:14.5px;color:#fff}
.fleet3d__dm{display:block;font-size:12px;font-weight:700;color:#7fd0ff;margin-top:2px}
.fleet3d__dr{display:block;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.66);margin-top:5px}

/* truthful process rail: prompt -> floor -> optional advisors -> doer -> proof -> receipt */
.fleet3d-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 4px;
  max-width:920px;margin:26px auto 0}
.fleet3d-flow__s{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.82);
  padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.fleet3d-flow__s small{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.5)}
.fleet3d-flow__a{color:#12c98a;font-weight:800;padding:0 2px}
.fleet3d-flow__s--gate{border-color:rgba(18,201,138,.45);background:rgba(18,201,138,.1)}
.fleet3d-flow__s--optional{border-style:dashed;border-color:rgba(138,107,255,.52);background:rgba(138,107,255,.08)}

/* The legacy universal-contrast layer gives every div light-theme ink and then
   forces p/li/span/small to inherit it with !important.  This section is an
   intentional dark engine room, so establish the inverse-color boundary at
   every rendered text surface with higher specificity. */
.skynet-showcase .fleet3d,
.skynet-showcase .fleet3d__stage,
.skynet-showcase .fleet3d__labels,
.skynet-showcase .fleet3d-flow{color:#fff!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d__tip{color:#fff!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d__tip-t{color:#fff!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d__tip-m{color:#7fd0ff!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d__tip-r{color:rgba(255,255,255,.78)!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d__lbl span{color:#fff!important;-webkit-text-fill-color:currentColor!important}
.skynet-showcase .fleet3d__lbl small{color:#8fd4ff!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d__lbl--lane span{color:rgba(255,255,255,.82)!important}
#skynet-map .fleet3d__lbl--adv span,
#skynet-map .fleet3d__lbl--bus span{color:rgba(255,255,255,.76)!important}
.skynet-showcase .fleet3d__hint{color:rgba(255,255,255,.84)!important;-webkit-text-fill-color:currentColor!important}
.skynet-showcase .fleet3d__lg{color:rgba(255,255,255,.88)!important;-webkit-text-fill-color:currentColor!important}
.skynet-showcase .fleet3d__lg b{color:rgba(255,255,255,.76)!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d-flow__s{color:rgba(255,255,255,.88)!important;-webkit-text-fill-color:currentColor!important}
.skynet-showcase .fleet3d-flow__s small{color:rgba(255,255,255,.76)!important;-webkit-text-fill-color:currentColor!important}
#skynet-map .fleet3d-flow__a{color:#25e3a3!important;-webkit-text-fill-color:currentColor!important}
.skynet-showcase .section-intro__desc{hyphens:none!important;overflow-wrap:normal!important;word-break:normal!important}

/* ---------- scroll-reveal (progressive enhancement: only hides when JS marks body) ---------- */
.sky-reveal-ready .sky-card,.sky-reveal-ready .sky-tli,.sky-reveal-ready .sky-step,.sky-reveal-ready .sky-uth span{
  opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.sky-reveal-ready .sky-card.is-in,.sky-reveal-ready .sky-tli.is-in,.sky-reveal-ready .sky-step.is-in,.sky-reveal-ready .sky-uth span.is-in{
  opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .sky-flow{grid-template-columns:1fr;gap:8px}
  .sky-flow__rail,.sky-flow__pulse{display:none}
  .sky-step{border-bottom:1px solid var(--color-border)}
  .sky-step:last-child{border-bottom:0}
  .sky-grid{grid-template-columns:1fr}
  .fleet3d__data{grid-template-columns:1fr 1fr}
  .fleet3d__stage{height:clamp(320px,64vw,440px)}
  .fleet3d__lbl--lane,.fleet3d__lbl--bus,.fleet3d__lbl--adv{opacity:0!important}
  .fleet3d__lbl span{font-size:10.5px}
  .fleet3d-flow{gap:5px 3px}
  .fleet3d-flow__s{font-size:11.5px;padding:7px 11px}
}
@media(max-width:560px){
  .fleet3d__data{grid-template-columns:1fr}
  .fleet3d__stage{height:360px}
  .fleet3d__hint{width:84%;font-size:11px;text-align:center}
  /* at phone width the pipeline is small; projected labels overlap — hide them and
     let the textual flow rail + legend carry the sequence instead. */
  .fleet3d__lbl{opacity:0!important}
  .fleet3d-flow{display:grid;grid-template-columns:1fr;gap:0;margin-top:26px}
  #skynet-map .fleet3d-flow__s{position:relative;justify-self:center;margin:0 0 24px;padding:8px 17px}
  #skynet-map .fleet3d-flow__s:not(:last-child)::after{content:"\2193";position:absolute;left:50%;bottom:-21px;
    transform:translateX(-50%);color:#25e3a3;-webkit-text-fill-color:#25e3a3}
  #skynet-map .fleet3d-flow__a{display:none}
  body.sky-engine-in-view #aiwp-chatbot-launcher{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}
@media(prefers-reduced-motion:reduce){
  .sky-flow__pulse{animation:none;left:50%}
  .sky-reveal-ready .sky-card,.sky-reveal-ready .sky-tli,.sky-reveal-ready .sky-step,.sky-reveal-ready .sky-uth span{opacity:1;transform:none}
}