/* ==========================================================================
   NEOSPHYR — home page sections ("Constellation")
   Loaded on index.html only, after site.css and constellation.css.
   Class names carry a c- prefix where site.css already uses the plain name
   (.hero, .pcard, .stack…), so the two never collide.
   ========================================================================== */

.c-mono{ font:500 12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.c-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* entrance for above-the-fold content: CSS only, no observer needed */
.c-intro{ animation:c-intro 1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both; }
@keyframes c-intro{ from{ opacity:0; transform:translateY(28px); } }

/* --- Hero: the constellation ------------------------------------------- */
.c-hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden;
  margin-top:calc(-1 * var(--nav-h)); padding:calc(var(--nav-h) + 64px) 0 72px;
}
.c-hero canvas{ position:absolute; inset:0; width:100%; height:100%; }
.c-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 30%, rgba(var(--bg-rgb),.92) 72%); }
.c-hero__in{ position:relative; z-index:1; width:100%; }
.c-hero h1{ font-size:clamp(48px,8.4vw,128px); line-height:.92; letter-spacing:-.055em; max-width:1100px; margin-top:18px; }
.c-hero h1 em{ font-size:1.08em; }
.c-hero__foot{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; margin-top:44px; padding-top:28px; border-top:1px solid var(--line); }
.c-hero__foot p{ max-width:540px; font-size:18px; color:var(--ink-2); }
.c-hero__foot .btn-row{ margin-top:0; }
.c-legend{ position:absolute; z-index:1; top:calc(var(--nav-h) + 30px); right:32px; display:grid; gap:8px; padding:14px 16px;
  border-radius:14px; background:rgba(251,250,246,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2); }
.c-legend span{ display:flex; align-items:center; gap:8px; }
.c-legend i{ width:9px; height:9px; border-radius:50%; }

/* --- Manifesto: words light up as you scroll ------------------------------ */
.c-manifesto{ padding:150px 0 130px; }
.c-manifesto__text{ font-weight:700; font-size:clamp(28px,3.8vw,52px); line-height:1.18; letter-spacing:-.03em; color:var(--ink); max-width:1080px; margin-top:22px; }
.c-manifesto .wd{ opacity:.14; transition:opacity .25s; }
.c-manifesto .wd.on{ opacity:1; }
.c-stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:80px; border-top:1px solid var(--line); }
.c-stats div{ padding:26px 24px 0 0; }
.c-stats b{ display:block; font-weight:800; font-size:44px; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.c-stats p{ font-size:14.5px; line-height:1.5; color:var(--ink-2); margin-top:10px; }
.c-stats a{ text-decoration:underline; text-underline-offset:3px; }

/* --- Product chips, two rows: each product chip jumps to its card below --- */
.pc{ position:relative; overflow:hidden; padding:40px 0; display:grid; gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.pc__track{ display:flex; width:max-content; }
.pc__set{ display:flex; align-items:center; gap:14px; padding-right:14px; flex:none; }
.chip{ --a:var(--blue); display:flex; align-items:center; gap:14px; padding:12px 20px 12px 12px; border-radius:18px;
  background:var(--card); border:1px solid var(--line); white-space:nowrap; text-decoration:none; color:var(--ink);
  transition:transform .25s, box-shadow .25s, border-color .25s; }
a.chip:hover{ transform:translateY(-3px); border-color:var(--a); box-shadow:0 14px 30px -18px rgba(21,35,59,.45); color:var(--ink); }
a.chip:hover .chip__go{ opacity:1; transform:none; }
.chip img{ width:44px; height:44px; border-radius:12px; }
.chip strong{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.chip span{ display:block; font-size:13px; color:var(--ink-3); }
.chip__go{ color:var(--a) !important; font-weight:800; opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; }
.chip--fact{ background:var(--navy); border-color:var(--navy); color:#fff; }
.chip--fact strong{ font-weight:800; font-size:22px; letter-spacing:-.03em; color:#fff; }
.chip--fact span{ color:#B4C0CF; }
.chip--quote{ background:transparent; border-style:dashed; }
.chip--quote strong{ font:400 20px var(--font-serif); font-style:italic; letter-spacing:0; }
.pc:hover .pc__track{ animation-play-state:paused; }
.run-l{ animation:run-l var(--dur,50s) linear infinite; }
.run-r{ animation:run-r var(--dur,56s) linear infinite; }
@keyframes run-l{ to{ transform:translateX(-50%); } }
@keyframes run-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* --- Products, stacked as you scroll ---------------------------------------- */
.c-stack{ padding:120px 0 60px; }
.c-head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:60px; }
.c-head h2{ font-size:clamp(34px,4.6vw,64px); line-height:1; letter-spacing:-.045em; margin-top:14px; }
.c-head p{ color:var(--ink-2); font-size:18px; max-width:480px; }
.c-anchor{ display:block; height:0; }
.c-card{ --a:var(--blue); position:sticky; top:calc(96px + var(--i) * 18px); display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center;
  min-height:460px; margin-bottom:40px; padding:44px; border-radius:32px; background:var(--card); border:1px solid var(--line);
  box-shadow:0 -10px 40px -24px rgba(21,35,59,.35); }
.c-card.is-target{ animation:c-target 1.6s ease-out; }
@keyframes c-target{
  0%,30%{ box-shadow:0 0 0 3px var(--a), 0 -10px 40px -24px rgba(21,35,59,.35); }
  100%{ box-shadow:0 0 0 0 transparent, 0 -10px 40px -24px rgba(21,35,59,.35); }
}
.c-card__top{ display:flex; align-items:center; gap:14px; }
.c-card__top img{ width:52px; height:52px; border-radius:14px; }
.c-card__no{ font:500 13px var(--font-mono); color:var(--a); }
.c-card h3{ font-weight:800; font-size:clamp(28px,3vw,42px); letter-spacing:-.04em; line-height:1.05; margin:14px 0; }
.c-card p{ color:var(--ink-2); }
.c-card__note{ margin-top:14px; font-size:14.5px; padding:12px 16px; border-left:3px solid var(--yellow); background:#FBF4E8; border-radius:0 12px 12px 0; }
.c-card__media{ border-radius:20px; overflow:hidden; background:#fff; border:1px solid var(--line); aspect-ratio:16/10; display:grid; place-items:center; }
.c-card__media img{ width:100%; height:100%; object-fit:contain; padding:18px; }
.c-card__media--photo img{ object-fit:cover; padding:0; }
.c-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.c-tags span{ font:500 12.5px var(--font-mono); padding:5px 11px; border-radius:999px; background:color-mix(in srgb, var(--a) 10%, transparent); color:var(--a); }
.c-card .link-arrow{ color:var(--a); }

/* --- FloatSight --------------------------------------------------------------- */
.c-fs{ margin:80px 24px 0; border-radius:36px; background:var(--navy); color:#fff; padding:110px 0; position:relative; overflow:hidden; }
.c-fs__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; }
.c-fs h2{ color:#fff; font-size:clamp(34px,4.4vw,62px); line-height:1; letter-spacing:-.045em; margin-top:16px; }
.c-fs h2 em{ color:#8FB3DC; }
.c-fs__lead{ color:#C9D3E0; font-size:18px; margin:22px 0 28px; max-width:480px; }
.c-fs .c-mono{ color:#8FB3DC; display:inline-flex; gap:10px; align-items:center; }
.c-fs__formats{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.c-fs__formats span{ font:500 12.5px var(--font-mono); padding:6px 11px; border-radius:8px; border:1px solid var(--navy-soft); color:#E3E9F1; }
.c-fs__trial{ margin-top:14px; font-size:14px; color:#B4C0CF; }

/* FloatSight Programme Explorer, rebuilt in HTML from the app's own tokens
   (black chrome, yellow reference date, square corners, Archivo + IBM Plex)
   so it stays sharp at any size. */
.fsui{ --k:#000; --mist:#F4F4F0; --ln:#D5D5CB; --ok:#2AD0A9; --okd:#0E7C62; --hv:#FFFF00;
  position:relative; margin:0; font:12px/1.35 'IBM Plex Sans', system-ui, sans-serif; color:#000; background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.75); font-feature-settings:"tnum" 1; }
.fsui p{ margin:0; }
.fsui__bar{ display:flex; align-items:center; gap:12px; height:38px; padding:0 12px; background:var(--k); color:#fff; font-size:11.5px; white-space:nowrap; }
.fsui__logo{ display:flex; align-items:center; gap:7px; font:800 13px Archivo, sans-serif; letter-spacing:.02em; }
.fsui__logo img{ width:18px; height:18px; }
.fsui__crumb{ color:#BDBDB3; overflow:hidden; text-overflow:ellipsis; }
.fsui__crumb b{ color:#fff; font-weight:600; }
.fsui__rev{ font:500 10.5px 'IBM Plex Mono', monospace; background:#333; padding:2px 7px; color:#ECECE6; }
.fsui__ref{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.fsui__date{ background:var(--hv); color:#000; font:600 11.5px 'IBM Plex Mono', monospace; padding:3px 8px; }
.fsui__av{ display:grid; place-items:center; width:24px; height:24px; background:#fff; color:#000; font-weight:700; font-size:10px; }
.fsui__body{ display:grid; grid-template-columns:150px 1fr; }
.fsui__side{ background:var(--mist); border-right:1px solid var(--ln); padding:12px 0; font-size:11.5px; }
.fsui__side small{ display:block; padding:0 12px 4px; font:500 9.5px 'IBM Plex Mono', monospace; letter-spacing:.08em; text-transform:uppercase; color:#666; }
.fsui__side p{ padding:0 12px 10px; font-weight:600; line-height:1.3; }
.fsui__side p span{ display:block; font-weight:500; font-size:10px; color:#6B6600; }
.fsui__side span.it{ display:flex; align-items:center; gap:8px; padding:6px 12px; color:#333; }
.fsui__side span.it i{ width:11px; height:11px; border:1.5px solid currentColor; border-radius:2px; flex:none; }
.fsui__side span.on{ background:#fff; color:#000; font-weight:600; box-shadow:inset 3px 0 0 var(--k); }
.fsui__main{ padding:14px 16px 0; min-width:0; }
.fsui__title{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.fsui__title strong{ font:800 19px Archivo, sans-serif; letter-spacing:-.02em; color:#000; }
.fsui__title span{ font-size:10.5px; color:#666; }
.fsui__kpis{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.fsui__kpis span{ border:1px solid var(--ln); padding:3px 8px; font-size:11px; white-space:nowrap; }
.fsui__kpis b{ font-weight:700; }
.fsui__kpis .warn{ border-color:#F2520A; color:#B33F06; }
.fsui__tools{ display:flex; gap:6px; align-items:center; margin-bottom:10px; }
.fsui__tools .in{ flex:1; border:1px solid var(--ln); padding:5px 8px; color:#8A8A8A; font-size:11px; }
.fsui__tools .bt{ border:1px solid #000; padding:4px 9px; font-weight:600; font-size:11px; }
.fsui__seg{ display:flex; border:1px solid var(--ln); }
.fsui__seg span{ padding:4px 8px; font-size:11px; color:#4D4D4D; }
.fsui__seg .on{ background:#000; color:#fff; }
.fsui__g{ display:grid; grid-template-columns:48px minmax(0,1.1fr) minmax(0,1.9fr); font-size:11px; border-top:1px solid var(--ln); }
.fsui__g > div{ height:24px; display:flex; align-items:center; border-bottom:1px solid #ECECE6; white-space:nowrap; overflow:hidden; }
.fsui__g .h{ height:30px; font-weight:600; color:#4D4D4D; background:#FAFAF7; }
.fsui__g .id{ font:500 10.5px 'IBM Plex Mono', monospace; color:#666; }
.fsui__g .nm{ padding-right:8px; text-overflow:ellipsis; }
.fsui__g .nm.s{ font-weight:700; }
.fsui__g .nm.l1{ padding-left:10px; } .fsui__g .nm.l2{ padding-left:20px; }
.fsui__g .nm em{ font-style:normal; display:inline-block; width:7px; height:7px; background:#000; transform:rotate(45deg); margin-right:7px; flex:none; }
.fsui__g .tl{ position:relative; border-left:1px solid var(--ln); background-image:linear-gradient(90deg,#F1F1EC 1px,transparent 1px); background-size:calc(100% / 15) 100%; }
.fsui__g .tl.h{ display:block; background-image:none; padding:0; }
.fsui__months{ position:absolute; inset:auto 0 0; display:grid; grid-template-columns:repeat(15,1fr); font-size:9.5px; color:#666; height:14px; align-items:center; }
.fsui__months span{ padding-left:3px; border-left:1px solid #ECECE6; }
.fsui__yrs{ position:absolute; inset:0 0 auto; height:15px; font-weight:700; font-size:10px; color:#000; }
.fsui__yrs span{ position:absolute; top:2px; }
.fsui .bar{ position:absolute; top:50%; height:9px; transform:translateY(-50%); }
.fsui .bar--sum{ height:3px; background:#000; }
.fsui .bar--sum::before, .fsui .bar--sum::after{ content:""; position:absolute; top:0; width:3px; height:7px; background:#000; }
.fsui .bar--sum::before{ left:0; } .fsui .bar--sum::after{ right:0; }
.fsui .bar--done{ background:repeating-linear-gradient(135deg, var(--okd) 0 3px, var(--ok) 3px 6px); border:1px solid var(--okd); }
.fsui .bar--wip{ background:linear-gradient(90deg, var(--okd) var(--p,50%), #fff var(--p,50%)); border:1px solid var(--okd); }
.fsui .bar--todo{ background:#fff; border:1px solid #000; }
.fsui .ms{ position:absolute; top:50%; width:9px; height:9px; background:#000; transform:translate(-50%,-50%) rotate(45deg); }
.fsui .ms--done{ background:var(--ok); outline:1px solid var(--okd); }
.fsui .ln-ref, .fsui .ln-data{ position:absolute; top:0; bottom:0; width:0; pointer-events:none; }
.fsui .ln-ref{ border-left:1.5px solid #000; }
.fsui .ln-data{ border-left:1.5px dashed #666; }
.fsui .ln-tag{ position:absolute; top:1px; transform:translateX(-50%); background:var(--hv); color:#000; font:600 9.5px 'IBM Plex Mono', monospace;
  padding:1px 5px; border:1px solid #000; white-space:nowrap; z-index:2; }
.c-fs__stage{ position:relative; padding:0 0 26px 26px; }
.c-fs__note{ position:absolute; z-index:3; display:flex; gap:12px; align-items:center; padding:12px 16px; background:#fff; color:#000;
  font:12.5px/1.35 'IBM Plex Sans', sans-serif; box-shadow:0 24px 48px -18px rgba(0,0,0,.6); border-left:4px solid var(--a,#F2520A); }
.c-fs__note b{ display:block; font:800 20px Archivo, sans-serif; letter-spacing:-.02em; color:#000; }
.c-fs__note--a{ left:-6px; bottom:-4px; }
.c-fs__note--b{ right:-14px; top:84px; --a:#2AD0A9; }

/* --- Pricing list --------------------------------------------------------------- */
.c-pricing{ padding:130px 0 40px; }
.c-plist{ border-top:1.5px solid var(--navy); }
.c-prow{ --a:var(--blue); display:grid; grid-template-columns:40px 1.3fr 1fr 1.6fr auto; gap:24px; align-items:center; padding:22px 0;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink-2); transition:padding .3s, background .3s; }
.c-prow:hover{ padding-left:14px; background:linear-gradient(90deg, color-mix(in srgb, var(--a) 8%, transparent), transparent 60%); color:var(--ink-2); }
.c-prow i{ width:12px; height:12px; border-radius:50%; background:var(--a); }
.c-prow b{ font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.c-prow .tr{ font:500 13px var(--font-mono); color:var(--ink-3); }
.c-prow .lim{ font-size:15px; }
.c-prow .pr{ font-weight:800; font-size:24px; letter-spacing:-.03em; white-space:nowrap; color:var(--ink); }
.c-prow .pr small{ font-size:13px; font-weight:500; color:var(--ink-3); }
.c-pricing .price-note{ margin-top:28px; }

/* --- Responsive ----------------------------------------------------------------- */
@media (max-width:1000px){
  .c-legend{ display:none; }
  .c-hero__foot, .c-head, .c-fs__grid{ grid-template-columns:1fr; }
  .c-card{ grid-template-columns:1fr; padding:28px; min-height:0; gap:24px; }
  .c-stats{ grid-template-columns:1fr 1fr; }
  .c-prow{ grid-template-columns:24px 1fr auto; gap:14px; }
  .c-prow .tr, .c-prow .lim{ display:none; }
  .c-fs__stage{ padding:0 0 24px; }
  .c-fs__note--b{ right:8px; }
}
@media (max-width:640px){
  .c-manifesto{ padding:90px 0; }
  .c-stack, .c-pricing{ padding:90px 0 30px; }
  .c-card{ top:calc(84px + var(--i) * 10px); border-radius:24px; padding:22px; }
  .c-tags{ display:none; }
  .c-fs{ margin:60px 8px 0; border-radius:24px; padding:72px 0; }
  .pc{ padding:24px 0; }
  .chip img{ width:36px; height:36px; }
  .fsui__body{ grid-template-columns:1fr; } .fsui__side{ display:none; }
  .fsui__crumb, .fsui__rev{ display:none; }
  .fsui__g{ grid-template-columns:0 minmax(0,1fr) minmax(0,1.3fr); }
  .fsui__tools .in, .fsui__seg{ display:none; }
  .c-fs__note--b{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .c-intro, .run-l, .run-r, .c-card.is-target{ animation:none; }
  .c-manifesto .wd{ opacity:1; }
  .c-card{ position:relative; top:auto; }
}