/* ============================================================================
   Vizaxis.com studio landing. Loads after base.css.
   Uses the base "house" skin (warm graphite + Inter). The chrome stays neutral
   so each app row can carry its own colour (pine for Pain Journal, violet for
   WarrantyVault): the house is the frame, the apps bring the paint.
   ========================================================================== */

/* Inter carries the display role here, so lift the heading weights. */
.hero h1 { font-weight: 800; }
.section-title, .feature-copy h3 { font-weight: 700; }
.hero h1 em { font-style: italic; }

/* ---------- Hero: editorial copy + the Vizaxis mark on a warm plate ---------- */
.hero .lede { max-width: 30ch; }
.hero .sub { max-width: 42ch; }

.logo-plate {
  display: grid;
  place-items: center;
  width: clamp(200px, 26vw, 300px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 70% at 50% 30%, var(--paper-raised), var(--paper-deep));
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-md);
}

.logo-plate img {
  width: 46%;
  height: auto;
  /* Source mark is dark on transparent: it reads as-is on the light plate. */
  opacity: 0.92;
}

/* The Vizaxis mark is a transparent logomark, not an app icon: no card shadow.
   Source is dark-on-transparent, so it reads as-is on the light header/hero; the
   footer sits on the dark accent surface, so invert the mark to light there. */
.brand img, .footer-brand img { box-shadow: none; border-radius: 0; }
.footer-brand img { filter: invert(1) brightness(2.2); }

/* ---------- Apps section header ---------- */
.apps-head { max-width: 46ch; }
.apps-head .sub { color: var(--ink-muted); max-width: 46ch; margin-top: 14px; }
.apps-head + .feature-row { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- App showcase rows: neutral row, app-coloured accents ---------- */
.app-row + .app-row { margin-top: clamp(56px, 8vw, 104px); }

.app-head { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.app-head .app-ico {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}

.app-head .app-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.app-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--accent);
  transition: gap 0.18s var(--ease-out), color 0.15s ease;
}

.app-open svg { transition: transform 0.18s var(--ease-out); }
.app-open:hover { gap: 11px; color: var(--accent-deep); }

/* Scope each row to the app's real brand colours (mirrors the app themes). */
.app-row.pj { --accent: #0B4F4A; --accent-deep: #08423D; --accent-soft: #6FB8AD; --signal: #B6442F; }
.app-row.wv { --accent: #7C3AED; --accent-deep: #5B21B6; --accent-soft: #C4B5FD; --signal: #F59E0B; }

@media (max-width: 900px) {
  .app-head { justify-content: center; }
}

@media (max-width: 680px) {
  .logo-plate { width: clamp(180px, 60vw, 240px); }
}