/* ParaQualis.ai — shared site styles. Light by default, honours OS dark mode.
   Palette = the ParaQualis "Sunset" brand theme (~/.claude/brand_colors.md):
   cool blues transitioning to warm orange/coral, on a warm cream page bg.
   Dark-mode values below are NOT in the brand doc (light-first palette) —
   derived to preserve the same blue/orange identity at usable contrast. */

:root {
  --bg: #efeae3;           /* warm sandy off-white — brand page bg */
  --bg-alt: #e7f3eb;        /* pale mint — alternating section bg */
  --text: #1a1a1a;
  --text-muted: #4a6478;    /* darkened slate-blue for AA-safe body use (base slate #81a5c1 is borderline) */
  --label-muted: #81a5c1;   /* the brand slate itself — for small caps/labels/borders only, per brand doc */
  --primary: #276bb2;       /* primary deep blue — header accents, links */
  --primary-strong: #3274c2; /* secondary deep blue — hover/pressed, per brand doc */
  --accent: #ff8053;        /* vivid orange — primary CTA */
  --accent-strong: #e8663d; /* derived hover for the orange CTA */
  --border: rgba(39, 107, 178, 0.16);
  --card-bg: #ffffff;
  --shadow: 0 1px 2px rgba(11, 37, 69, 0.06), 0 8px 24px rgba(11, 37, 69, 0.06);
  --radius: 10px;
  --max-width: 1120px;
  --sunset-gradient: linear-gradient(180deg,
      #276bb2 0%, #3274c2 12%, #4c8ed8 26%, #5294dc 40%,
      #89c0f5 55%, #b6dbf6 68%, #fecf81 82%, #ffbe69 92%, #ff8053 100%);
  --sunset-gradient-diagonal: linear-gradient(135deg, #5294dc 0%, #89c0f5 50%, #fecf81 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1b2b;
    --bg-alt: #142236;
    --text: #eef2f6;
    --text-muted: #9db3c8;
    --label-muted: #89c0f5;
    --primary: #89c0f5;      /* the brand's own "light blue" reused as dark-mode primary for contrast */
    --primary-strong: #b6dbf6;
    --accent: #ff8053;       /* vivid orange holds up fine on dark */
    --accent-strong: #ff9a75;
    --border: rgba(137, 192, 245, 0.2);
    --card-bg: #16233a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 17px;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: normal;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--text); }
p.lede { color: var(--text-muted); font-size: 1.15rem; }

/* Inline text links use the deep blue (AA-safe per the brand doc), not the
   vivid orange — orange is reserved for buttons, per "restrained palette:
   single warm highlight where useful," not scattered across body copy. */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header / nav --- */
header.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.wordmark {
  display: flex;
  align-items: center;
  /* The logo's ink is a fixed brand navy — great contrast on the light cream
     page background, but would nearly disappear on the dark-mode navy body.
     Rather than a filter hack on a multi-path SVG (fragile, unverifiable
     without a browser), give it a small cream "badge" so it stays on its
     native light surface in both themes. In light mode this is the same
     colour as the page, so it's invisible there and only does work in dark
     mode — not a dark-mode cop-out for the rest of the page, just the mark. */
  background: #efeae3;
  padding: 6px 12px;
  border-radius: 8px;
}

.wordmark .logo-img {
  height: 54px;
  width: auto;
  display: block;
}

@media (max-width: 480px) {
  .wordmark .logo-img { height: 42px; }
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav.main-nav a {
  color: var(--text);
  font-size: 0.98rem;
}

nav.main-nav a.current {
  color: var(--primary);
}

nav.main-nav a:hover { text-decoration: none; color: var(--primary); }

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-strong); text-decoration: none; }

/* Header nav's Contact button stays the structural deep blue rather than
   the vivid orange, so orange reads as "the one big action" per page
   (hero / cta-band) instead of being spent on a button that's on-screen
   at all times. */
nav.main-nav .btn-primary {
  background: var(--primary);
}
nav.main-nav .btn-primary:hover { background: var(--primary-strong); }

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text);
}
.nav-toggle svg { display: block; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  nav.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 24px 20px;
    gap: 16px;
    display: none;
  }
  nav.main-nav.open { display: flex; }
  nav.main-nav .btn { width: 100%; text-align: center; }
}

/* --- Hero --- */
.hero {
  padding: 88px 0 72px;
}
.hero .kicker {
  /* Deep blue, not the vivid orange accent — orange fails AA contrast at
     this size/weight on the cream background; orange stays reserved for
     buttons per the brand doc's own "CTA accent" role. */
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.hero h1 { max-width: 780px; }
.hero p.lede { max-width: 620px; margin-top: 18px; }
.hero .cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* The literal sunset gradient as the hero background on every page's top
   section — the brand doc's suggested "renders the brand narrative
   directly" usage. A dark navy scrim keeps white text legible across every
   stop of the gradient, including the light peach end where plain white
   text would otherwise fail contrast. */
.hero-brand {
  background:
    linear-gradient(rgba(8, 20, 36, 0.62), rgba(8, 20, 36, 0.62)),
    var(--sunset-gradient);
  color: #fff;
}
.hero-brand .kicker { color: #ffdcb8; }
.hero-brand h1, .hero-brand p.lede { color: #fff; }
.hero-brand .btn-outline { border-color: rgba(255,255,255,0.55); color: #fff; }
.hero-brand .btn-outline:hover { border-color: #fff; color: #fff; text-decoration: underline; }

/* --- Sections --- */
section { padding: 64px 0; }
section.alt { background: var(--bg-alt); }
section .section-head { max-width: 700px; margin-bottom: 40px; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* All cards in one line across the page, however many there are —
   grows/shrinks to fit, wraps only when the viewport is genuinely too
   narrow (rather than a fixed column count forcing an awkward wrap). */
.row-flex {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.row-flex .card { flex: 1 1 200px; }
@media (max-width: 600px) {
  .row-flex .card { flex-basis: 100%; }
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card h3 { color: var(--primary); }
.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-alt);
  color: var(--primary);
  font-family: Georgia, serif;
  margin-bottom: 14px;
  font-size: 0.95rem;
}

blockquote.quote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--text-muted);
  font-style: italic;
}
blockquote.quote .placeholder-tag {
  display: block;
  font-family: -apple-system, sans-serif;
  font-style: normal;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 12px;
}

/* The brand doc's own suggested "marketing surface" gradient — cool blue
   into warm peach. Dark text throughout reads cleanly across every stop
   (unlike white, which would fail once the gradient reaches the light
   peach end), so this one gradient works unmodified in light AND dark mode. */
.cta-band {
  text-align: center;
  padding: 72px 0;
  background: var(--sunset-gradient-diagonal);
  color: #14202c;
}
.cta-band h2, .cta-band p { color: #14202c; }
.cta-band p { color: #2c3e4d; }
.cta-band .btn-primary { background: var(--accent); color: #fff; }
.cta-band .btn-primary:hover { background: var(--accent-strong); }

/* --- Footer --- */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
footer.site-footer .footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
footer.site-footer nav { display: flex; gap: 20px; }
footer.site-footer a { color: var(--text-muted); }
footer.site-footer a:hover { color: var(--primary); }

/* --- Contact form --- */
form.contact-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}
form.contact-form label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
form.contact-form input,
form.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
form.contact-form input:focus,
form.contact-form textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
form.contact-form textarea { min-height: 140px; resize: vertical; }

/* --- Product screenshots --- */
.shot-figure {
  margin: 32px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--card-bg);
}
/* Fixed aspect-ratio window so every screenshot sits in the same size
   frame regardless of its native dimensions — the source screenshots are
   wildly different shapes (a tall document page vs. a wide swimlane
   diagram). Uses object-fit: CONTAIN, not cover: these are information-
   dense screenshots (diagrams, tables, small text), not photos — cropping
   to fill the frame was cutting off real content. Contain always shows
   the whole image, letterboxed against the frame background if the
   aspect ratio doesn't match exactly. */
.shot-figure .shot-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-alt);
}
.shot-figure img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.shot-figure img:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

/* --- Lightbox (click-to-zoom on product screenshots) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 20, 36, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shot-figure figcaption {
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  border-top: 1px solid var(--border);
}
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.shot-pair .shot-figure { margin-top: 0; }
@media (max-width: 860px) {
  .shot-pair { grid-template-columns: 1fr; }
}

.shot-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.shot-quad .shot-figure { margin-top: 0; }
@media (max-width: 960px) { .shot-quad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .shot-quad { grid-template-columns: 1fr; } }

.pillar-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--bg-alt);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.proof-line {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--primary);
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 32px 0 0;
}

/* --- Bio card (About > Team) --- */
.bio-card {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.bio-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--bg-alt);
}
.bio-card h3 { color: var(--primary); margin-bottom: 2px; }
.bio-title {
  color: var(--primary);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .bio-card { flex-direction: column; align-items: center; text-align: center; }
}

.contact-direct {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.contact-direct .label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.contact-direct .value {
  font-size: 1.15rem;
  color: var(--primary);
}