/* Dark and light mode v1.2 — semantic variables. Dark is default; light follows the device unless data-theme is set on <html>. */



body {background: var(--pg-surface);color: var(--pg-text);}
a {color: var(--pg-link);}
.pg-card {background: var(--pg-surface-raised);border: 1px solid var(--pg-line);border-radius:var(--radius);}
.pg-muted {color: var(--pg-text-muted);}
.pg-inverse {background: var(--pg-surface-inverse);color: var(--pg-text-inverse);}
.pg-logo-panel {background: var(--pg-navy);border-radius:var(--radius);padding: var(--pg-space-6);display: inline-block;} /* always wrap the logo PNG in this */
/* Toggle: a <button aria-label="Switch colour mode"> that sets document.documentElement.dataset.theme to "light" or "dark" and saves it in localStorage. */

/* Load fonts: https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&family=IBM+Plex+Mono:wght@500&display=swap */
.pg-display   {font: 800 64px/68px var(--pg-font-sans);letter-spacing: -0.01em;}
.pg-h1        {font: 800 40px/46px var(--pg-font-sans);}
.pg-h2        {font: 700 28px/34px var(--pg-font-sans);}
.pg-body      {font: 400 18px/28px var(--pg-font-sans);}
.pg-descriptor{font: 300 16px/20px var(--pg-font-sans);letter-spacing: 0.3em;text-transform: uppercase;}
.pg-label     {font: 500 14px/20px var(--pg-font-mono);letter-spacing: 0.15em;text-transform: uppercase;}
.pg-button    {font: 700 18px/1 var(--pg-font-sans);border-radius:var(--radius);padding: 16px 32px;}
.pg-glow-line {height: 8px;background: linear-gradient(90deg, #00bbfe 0 33.33%, #0e68fe 33.33% 66.66%, #7028fc 66.66% 100%);}

/* Motion v1.1 — add class "pg-reveal" to elements; add "is-visible" with an IntersectionObserver (threshold 0.15, unobserve after first reveal).
   The "pg-motion" class on <html> should be added by script, so content stays visible if scripts are off. */
.pg-motion .pg-reveal {opacity: 0;transform: translateY(var(--pg-rise));}
.pg-motion .pg-reveal.is-visible {opacity: 1;transform: none;}



.pg-motion .pg-glow-line {transform: scaleX(0);transform-origin: left;}
.pg-motion .pg-glow-line.is-visible {transform: scaleX(1);}
.pg-glow-card {box-shadow: var(--pg-shadow-card);}
.pg-glow-card.is-visible {box-shadow: var(--pg-glow);}


@media (prefers-reduced-motion: reduce){
  .pg-motion .pg-reveal, .pg-motion .pg-glow-line, .pg-glow-card, .pg-button {opacity: 1 !important;}
}