/* CONTEXT
   module: websites/pgpro365
   purpose: The final design layer, loaded last, built on what award juries reward (design and usability first): a near-black canvas with a soft teal spotlight and fine grain, clean sans-serif type with tight tracking and gradient-lit headlines, glass cards with light-catching gradient borders, a bento feature grid, a slow property-type marquee, a facts row, pill buttons and calm scroll reveals that switch off for reduced motion. One teal accent. No external fonts or requests.
   route: none   permission: none   tenant: not applicable   audience: public
   tests: lib/check.mjs (size) */

:root {
  --a-bg: #07080a; --a-panel: #0d0f12; --a-ink: #f5f5f7; --a-muted: #8b8f98; --a-line: rgb(255 255 255 / .08);
  --a-accent: #2dd4bf; --a-radius: 22px;
  --a-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --a-glass: linear-gradient(var(--a-panel), var(--a-panel)) padding-box,
             linear-gradient(150deg, rgb(255 255 255 / .16), rgb(255 255 255 / .03) 38%, rgb(45 212 191 / .28)) border-box;
}

/* Canvas, grain, type */
body { background: var(--a-bg); color: var(--a-ink); font-family: var(--a-sans); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
h1, h2, h3, .finale-word { font-family: var(--a-sans); }
h1, h2 { font-weight: 650; letter-spacing: -.045em; line-height: 1.04;
  background: linear-gradient(180deg, #fff 30%, #a7abb4); -webkit-background-clip: text; background-clip: text; color: transparent; }
h3 { font-weight: 600; letter-spacing: -.02em; color: var(--a-ink); }
.hero-dark h1 { font-size: clamp(3rem, 7.2vw, 6.4rem); max-width: 15ch; }
.lead, .hero-dark .lead, .section-head p { color: var(--a-muted); }
.eyebrow, .hero-dark .eyebrow.pill-e { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--a-ink); padding: .4rem .9rem; border-radius: 999px; border: 1px solid transparent; background: var(--a-glass); }
.section-head { margin-inline: auto; text-align: center; }
.section-head p { margin-inline: auto; }

/* Header: frosted glass */
.site-header, .site-header.dark { background: rgb(7 8 10 / .6); border-bottom: 1px solid var(--a-line); backdrop-filter: saturate(160%) blur(18px); }
.nav a:not(.btn) { color: #c9ccd3; font-weight: 500; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: #fff; }
.menu-btn { border-radius: 999px; background: transparent; border: 1px solid var(--a-line); color: var(--a-ink); }

/* Hero: spotlight */
.hero, .hero-dark { background: var(--a-bg); }
.hero-dark::before, .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgb(45 212 191 / .22), transparent 70%),
              radial-gradient(40% 40% at 50% 62%, rgb(45 212 191 / .10), transparent 70%); }
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; }

/* Sections */
.section { border-top: 0; }
.section.alt, .dark-sec { background: transparent; }
.site-footer { background: var(--a-bg); border-top: 1px solid var(--a-line); }

/* Buttons: pills */
.btn, .hero-dark .btn, .site-header.dark .btn, .band .btn, .cta .btn {
  border-radius: 999px; border: 0; background: var(--a-ink); color: #050505; font-weight: 600; letter-spacing: -.01em;
  padding: .85rem 1.5rem; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 8px 30px -8px rgb(45 212 191 / .45); transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover, .hero-dark .btn:hover, .site-header.dark .btn:hover, .band .btn:hover, .cta .btn:hover {
  background: #fff; color: #000; transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 0 14px 40px -10px rgb(45 212 191 / .6); }
.btn.btn-ghost, .hero-dark .btn.btn-ghost, .finale .btn.btn-ghost {
  background: rgb(255 255 255 / .04); color: var(--a-ink); border: 1px solid var(--a-line); box-shadow: none; backdrop-filter: blur(8px); }
.btn.btn-ghost:hover, .hero-dark .btn.btn-ghost:hover { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .2); }
.nav .btn-sm { padding: .5rem 1rem; }
.center-actions { justify-content: center; }

/* Glass cards */
.card, .band, .cta, .pane, .form, .soon-card, details {
  border-radius: var(--a-radius); border: 1px solid transparent; background: var(--a-glass); box-shadow: none; color: var(--a-ink); }
.card:hover { box-shadow: 0 30px 60px -30px rgb(45 212 191 / .35); }
.card .icon, .bento .icon { color: var(--a-accent); }
.cta { background: var(--a-glass) !important; }
.cta h2 { margin-inline: auto; }
.badge, .tag, .badge.live { background: rgb(45 212 191 / .1); color: var(--a-accent); border-radius: 999px; padding: .2rem .6rem; letter-spacing: .04em; }
input, select, textarea { border-radius: 12px !important; background: rgb(255 255 255 / .03) !important; border: 1px solid var(--a-line) !important; color: var(--a-ink) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--a-accent) !important; outline: none; }

/* Marquee of property types */
.marquee { overflow: hidden; border-block: 1px solid var(--a-line); padding: 1.1rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; gap: 3rem; width: max-content; animation: mq 38s linear infinite; }
.mq-item { display: inline-flex; align-items: center; gap: .6rem; color: #c9ccd3; font-weight: 500; white-space: nowrap; }
.mq-item .icon { width: 20px; height: 20px; color: var(--a-accent); }
@keyframes mq { to { transform: translateX(-50%); } }
.marquee:hover .mq-track { animation-play-state: paused; }

/* Facts row */
.stats-sec { padding-block: clamp(3rem, 6vw, 4.5rem); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--a-line); border-radius: var(--a-radius); overflow: hidden; }
.stat { padding: clamp(1.4rem, 3vw, 2.4rem); text-align: center; }
.stat + .stat { border-left: 1px solid var(--a-line); }
.stat dd { margin: 0; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 650; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(180deg, #fff, #7ee8d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat dt { color: var(--a-muted); font-size: .92rem; margin-top: .6rem; order: 2; }
.stat { display: flex; flex-direction: column-reverse; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bento-item { border-radius: var(--a-radius); border: 1px solid transparent; background: var(--a-glass); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.bento-item.lead { grid-column: span 2; }
.bento-item h3 { font-size: 1.12rem; margin: .7rem 0 .4rem; }
.bento-item p { color: var(--a-muted); margin: 0; font-size: .95rem; }
.bento-item .icon { width: 26px; height: 26px; }
.bento-art { margin-top: auto; }
.bento-art .ui { transform: scale(.96); transform-origin: top left; }

/* Closing title card: light band, giant clean wordmark */
.finale { background: #f4f4f2; }
.finale-word { font-weight: 700; letter-spacing: -.07em; background: none; color: #0a0a0a; }
.finale .btn { background: #0a0a0a; color: #fff; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .35); }
.finale .btn:hover { background: #222; color: #fff; }
.finale .btn.btn-ghost { background: transparent; color: #0a0a0a; border: 1px solid #c7c7cc; }

/* Calm scroll reveals */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bento-item, .stat, .section-head { animation: a-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    @keyframes a-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .btn { transition: none; } }

@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; }
  .bento-item.lead { grid-column: auto; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--a-line); }
}