/* =====================================================================
   Veltrix Hub — page sections.

   The Hub is deliberately NOT another content page. Services says "we
   build technology for you"; the Hub says "here is the technology you
   can use". So the visual language is a product surface, not an
   editorial one: app tiles, a workspace window, status pills, a wired
   ecosystem diagram.

   Every section gets its own mechanic so the page does not read as ten
   stacked cards:
     home        fanned 3D app stack behind the headline
     workspace   a real application window mockup
     products    status-pilled product cards with a hover face
     tools       three-column utility palette
     needs       need -> product rows joined by a drawn connector
     projects    project list mockup with live status dots
     resources   four flat link cards
     ecosystem   SVG tree, animated flow along the wires
     soon        phase roadmap as a horizontal track
     final CTA   shared .v-fc from site.css

   Type: Oswald headings, Montserrat body. No third family anywhere.
   ===================================================================== */

.v-hubpg { --ink: #0e1f19; --mut: #5a6d64; --em: #0b7a58; --line: rgba(14, 31, 25, 0.10); }

.v-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); position: relative; z-index: 1; }

/* shared section rhythm */
.v-hb { position: relative; padding: clamp(5.5rem, 10vw, 9rem) 0; }

/* Every section carries the same drifting grid the hero and the final CTA
   already had, so the page reads as one surface instead of alternating
   flat bands. Colour is a variable rather than a repeated block: only the
   line tint changes between light and dark sections, never the geometry.
   Masked top and bottom so the lines fade out before a section seam
   instead of butting into the next background. v-fc-grid is reused from
   site.css — same 48px step, so the sections stay in phase. */
.v-hb { --grid: rgba(20, 96, 75, 0.05); }
.v-hb.v-on-dark { --grid: rgba(20, 225, 133, 0.055); }
.v-hb::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  animation: v-fc-grid 36s linear infinite;
}
.v-hb > .v-wrap { position: relative; z-index: 1; }
.v-hb__eyebrow {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #0b7a58; margin: 0 0 20px; text-align: center;
}
.v-on-dark .v-hb__eyebrow { color: #14E185; }
.v-hb__title {
  font-family: "Oswald", Arial, sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  line-height: 1.02; letter-spacing: -0.02em;
  color: #0e1f19; margin: 0 auto clamp(20px, 3vw, 28px);
  max-width: 20ch; text-align: center;
}
.v-hb__title .em { color: #109e75; }
.v-on-dark .v-hb__title { color: #ffffff; }
.v-on-dark .v-hb__title .em { color: #14E185; }
.v-hb__lead {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75;
  color: #5a6d64; max-width: 62ch; margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}
.v-on-dark .v-hb__lead { color: #a8c4b8; }


/* =====================================================================
   HUB HOME — headline over a fanned stack of app tiles.

   The stack is the Creative-Cloud idea stated visually: many products,
   one surface. Tiles are absolutely placed and rotated with per-tile
   custom properties so no two share a resting angle.
   ===================================================================== */
.v-hh {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #0d2a20 0%, #061410 55%, #04100c 100%);
  padding: clamp(7rem, 13vw, 11rem) 0 clamp(5rem, 9vw, 8rem);
}
.v-hh::before {                      /* engineering grid */
  content: ""; position: absolute; inset: -80px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 225, 133, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 225, 133, 0.055) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 10%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 30%, black 10%, transparent 72%);
  animation: v-hh-grid 40s linear infinite;
}
@keyframes v-hh-grid { to { background-position: 54px 54px, 54px 54px; } }

.v-hh__in { position: relative; z-index: 2; text-align: center; }
.v-hh__title {
  font-family: "Oswald", Arial, sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  line-height: 0.97; letter-spacing: -0.025em;
  color: #ffffff; margin: 0 auto clamp(22px, 3vw, 30px); max-width: 16ch;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
}
.v-hh__title .em { color: #14E185; }
.v-hh__p {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75;
  color: #b9d6c9; max-width: 60ch; margin: 0 auto clamp(34px, 4vw, 44px);
}
.v-hh__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =====================================================================
   YOUR WORKSPACE — an application window, not a screenshot.

   Built from DOM so it stays crisp, themable and readable to a screen
   reader. Labelled a preview because Phase 3 is where it becomes real.
   ===================================================================== */
.v-ws { background: #f4f8f6; }
.v-ws__frame {
  max-width: 1080px; margin: 0 auto;
  border-radius: clamp(18px, 2vw, 26px); overflow: hidden;
  background: #ffffff; border: 1px solid var(--line);
  box-shadow: 0 40px 90px rgba(14, 31, 25, 0.14);
}
.v-ws__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; background: #0e1f19; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.v-ws__dot { width: 11px; height: 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.v-ws__dot:nth-child(3) { margin-right: 14px; }
.v-ws__url {
  flex: 1; text-align: center;
  font-family: "Montserrat", Arial, sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; color: #7da898;
}
.v-ws__body { display: grid; grid-template-columns: 210px 1fr; min-height: 420px; }
.v-ws__side { background: #0b1a14; padding: 22px 16px; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.v-ws__brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 0 6px;
}
.v-ws__brand img { width: 26px; height: 26px; }
.v-ws__brand span {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  letter-spacing: 0.1em; font-size: 15px; color: #ffffff; text-transform: uppercase;
}
.v-ws__nav { display: flex; flex-direction: column; gap: 3px; }
.v-ws__nav span {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-family: "Montserrat", Arial, sans-serif; font-size: 13px; font-weight: 500;
  color: #8fb3a3; text-decoration: none; transition: background 200ms ease, color 200ms ease;
}
.v-ws__nav span i {
  width: 15px; height: 15px; flex: none;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  background: currentColor;
}
.v-ws__nav span:hover { background: rgba(255, 255, 255, 0.05); color: #dff7ec; }
.v-ws__nav span.is-on { background: rgba(20, 225, 133, 0.14); color: #14E185; }

.v-ws__main { padding: clamp(22px, 3vw, 34px); }
.v-ws__hi {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 2vw, 1.7rem); letter-spacing: -0.01em; color: #0e1f19; margin: 0 0 4px;
}
.v-ws__sub {
  font-family: "Montserrat", Arial, sans-serif; font-size: 13px; color: #5a6d64; margin: 0 0 24px;
}
.v-ws__ch {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #0b7a58; margin: 0 0 12px;
}
.v-ws__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.v-ws__app {
  display: flex; align-items: center; gap: 11px;
  padding: 13px; border-radius: 14px;
  background: #f4f8f6; border: 1px solid var(--line);
  transition: transform 260ms cubic-bezier(.22, 1, .28, 1), box-shadow 260ms ease,
              opacity 260ms ease;   /* reveal target — see .v-pr__card */
}
.v-ws__app:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 31, 25, 0.1); }
.v-ws__app span.ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: linear-gradient(150deg, #14E185, #0b7a58);
  display: grid; place-items: center;
}
.v-ws__app span.ic i {
  width: 17px; height: 17px; display: block;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  background: #04120c;
}
.v-ws__app b {
  display: block;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 13px; color: #0e1f19;
}
.v-ws__app em {
  display: block; font-style: normal;
  font-family: "Montserrat", Arial, sans-serif; font-size: 11px; color: #5a6d64;
}
.v-ws__rows { display: flex; flex-direction: column; gap: 8px; }
.v-ws__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff;
}
.v-ws__row b {
  flex: 1; font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: 13px; color: #0e1f19;
}
.v-ws__bar-t { width: 96px; height: 5px; border-radius: 999px; background: #e4ece8; overflow: hidden; }
.v-ws__bar-t span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #14E185, #0b7a58); }
.v-ws__pct {
  font-family: "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 700;
  color: #5a6d64; width: 34px; text-align: right;
}
.v-ws__note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: clamp(26px, 3.4vw, 36px) auto 0; max-width: 640px;
  padding: 13px 20px; border-radius: 999px;
  background: rgba(16, 158, 117, 0.08); border: 1px dashed rgba(16, 158, 117, 0.35);
  font-family: "Montserrat", Arial, sans-serif; font-size: 13px; color: #0b7a58; text-align: center;
}


/* =====================================================================
   PRODUCTS — status-pilled cards.
   ===================================================================== */
.v-pr { background: #ffffff; }
.v-pr__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.v-pr__card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 22px; background: #f4f8f6; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  /* opacity belongs here: this card is a reveal target, and reveal.css
     loads BEFORE this file at equal specificity, so this declaration wins
     and would drop opacity from the transition entirely. */
  transition: transform 380ms cubic-bezier(.22, 1, .28, 1), box-shadow 380ms ease,
              border-color 380ms ease, opacity 380ms ease;
}
.v-pr__card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(14, 31, 25, 0.13); border-color: rgba(16, 158, 117, 0.3); }
.v-pr__card::before {                /* emerald wash rises on hover */
  content: ""; position: absolute; inset: auto 0 0 0; height: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 225, 133, 0.10), rgba(20, 225, 133, 0));
  transition: height 460ms cubic-bezier(.22, 1, .28, 1);
}
.v-pr__card:hover::before { height: 100%; }
.v-pr__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.v-pr__ic {
  width: 52px; height: 52px; flex: none; border-radius: 15px;
  background: linear-gradient(150deg, #14E185, #0b7a58);
  display: grid; place-items: center; box-shadow: 0 12px 26px rgba(16, 158, 117, 0.28);
}
.v-pr__ic i {
  width: 25px; height: 25px; display: block;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  background: #04120c;
}
.v-pr__pill {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
/* Alpha reads as "in testing", so it gets its own amber-ish tone rather than
   borrowing the green that means shipped. */
.v-pr__pill--alpha { background: rgba(138, 84, 6, 0.12); color: #8a5406; }
.v-pr__pill--live { background: rgba(16, 158, 117, 0.14); color: #0b6b4f; }
.v-pr__pill--beta { background: rgba(138, 84, 6, 0.12); color: #8a5406; }
.v-pr__pill--soon { background: rgba(14, 31, 25, 0.07); color: #46584f; }
.v-pr__n {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -0.01em; color: #0e1f19; margin: 0;
}
.v-pr__t {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: 14px;
  line-height: 1.5; color: #0b7a58; margin: 0;
}
.v-pr__d {
  font-family: "Montserrat", Arial, sans-serif; font-size: 14px; line-height: 1.72;
  color: #5a6d64; margin: 0; flex: 1;
}
.v-pr__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.v-pr__tags span {
  font-family: "Montserrat", Arial, sans-serif; font-size: 11px; font-weight: 600;
  color: #46584f; padding: 5px 11px; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--line);
}
.v-pr__card--ghost { border-style: dashed; background: #fbfdfc; }
.v-pr__card--ghost .v-pr__ic { background: rgba(16, 158, 117, 0.12); box-shadow: none; }
.v-pr__card--ghost .v-pr__ic i { background: #0b7a58; }


/* =====================================================================
   ECOSYSTEM — the tree, drawn.
   ===================================================================== */
.v-ec { background: #04100c; overflow: hidden; }
.v-ec__scene { max-width: 1000px; margin: 0 auto; }
.v-ec__svg { width: 100%; height: auto; display: block; overflow: visible; }
.v-ec__wire { fill: none; stroke: rgba(20, 225, 133, 0.3); stroke-width: 1.6; }
.v-ec__flow {
  fill: none; stroke: #14E185; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 16 220; filter: drop-shadow(0 0 5px rgba(20, 225, 133, 0.85));
  animation: v-ec-run 3.6s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes v-ec-run { to { stroke-dashoffset: -236; } }
.v-ec__box { fill: rgba(255, 255, 255, 0.05); stroke: rgba(20, 225, 133, 0.3); stroke-width: 1.4; }
.v-ec__box--hub { fill: url(#vecHub); stroke: none; }
.v-ec__box--end { fill: rgba(20, 225, 133, 0.12); stroke: rgba(20, 225, 133, 0.45); }
.v-ec__t {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; fill: #ffffff;
}
.v-ec__t--hub { fill: #04120c; font-size: 19px; letter-spacing: 0.14em; }
.v-ec__t--br  { font-size: 13px; fill: #14E185; letter-spacing: 0.16em; }
.v-ec__t--end { font-size: 15px; letter-spacing: 0.12em; }
.v-ec__l {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 500;
  font-size: 11.5px; fill: #a8c4b8;
}


/* =====================================================================
   COMING SOON + the phase roadmap track.
   ===================================================================== */
.v-cs { background: #ffffff; }
.v-cs__track {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 20px); margin-bottom: clamp(40px, 5vw, 56px);
}
.v-cs__ph {
  position: relative; padding: clamp(22px, 2.6vw, 28px);
  border-radius: 18px; background: #f4f8f6; border: 1px solid var(--line);
}
.v-cs__ph--now { background: linear-gradient(160deg, rgba(20, 225, 133, 0.13), rgba(20, 225, 133, 0.03)); border-color: rgba(16, 158, 117, 0.36); }
.v-cs__k {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #0b7a58; margin: 0 0 8px;
}
.v-cs__ph h3 {
  font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 1.15rem; color: #0e1f19; margin: 0 0 10px;
}
.v-cs__ph ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.v-cs__ph li {
  font-family: "Montserrat", Arial, sans-serif; font-size: 13px; color: #5a6d64;
  padding-left: 15px; position: relative;
}
.v-cs__ph li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: #109e75;
}
.v-cs__now {
  position: absolute; top: -10px; right: 16px;
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: #0b6b4f; color: #ffffff;
}
.v-cs__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
  .v-ws__body { grid-template-columns: 1fr; }
  .v-ws__side { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .v-ws__nav { flex-direction: row; flex-wrap: wrap; }
  .v-ws__nav span { padding: 8px 11px; }
}
@media (max-width: 720px) {
  .v-hb::before { background-size: 36px 36px, 36px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .v-hh::before, .v-hb::before, .v-ec__flow { animation: none; }
}