/* =========================================================
   PixlKey Public Site CSS
   Sleek • Professional • Future-forward (Info site, not app UI)
   Keeps existing class structure, upgrades the system + polish.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  color-scheme: dark;

  /* Core palette (cool greys + restrained gold) */
  --pk-bg: #0b0d10;                 /* page background */
  --pk-bg-2: #0f1318;               /* subtle alternate */
  --pk-surface: rgba(255,255,255,.04);
  --pk-surface-2: rgba(255,255,255,.06);
  --pk-surface-3: rgba(255,255,255,.08);

  --pk-border: rgba(255,255,255,.10);
  --pk-border-2: rgba(255,255,255,.16);

  --pk-text: rgba(255,255,255,.92);
  --pk-text-muted: rgba(255,255,255,.70);
  --pk-text-faint: rgba(255,255,255,.55);

  --pk-accent: #d2b648;             /* gold */
  --pk-accent-strong: #f2de8a;      /* brighter gold */
  --pk-accent-soft: rgba(210,182,72,.18);
  --pk-accent-border: rgba(210,182,72,.28);

  /* Typography + rhythm */
  --pk-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --pk-font-display: 'Orbitron', var(--pk-font-sans);

  --pk-radius-sm: 10px;
  --pk-radius-md: 14px;
  --pk-radius-lg: 18px;

  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 20px;
  --pk-space-6: 24px;
  --pk-space-7: 28px;
  --pk-space-8: 32px;
  --pk-space-9: 40px;

  /* Depth + effects */
  --pk-shadow-sm: 0 10px 24px rgba(0,0,0,.30);
  --pk-shadow: 0 18px 42px rgba(0,0,0,.40);
  --pk-shadow-lg: 0 26px 70px rgba(0,0,0,.55);

  --pk-focus: 0 0 0 3px rgba(242,222,138,.22), 0 0 0 1px rgba(242,222,138,.38);
}

/* ---------- Global base ---------- */
*{ box-sizing:border-box; }

/* ---- Fixed global backdrop (doesn't scroll) ---- */
html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--pk-font-sans);
  color: var(--pk-text);
  background: var(--pk-bg); /* keep body base colour only */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The actual gradient lives here, pinned to the viewport */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(210,182,72,.12), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(800px 500px at 60% 110%, rgba(210,182,72,.08), transparent 55%),
    linear-gradient(180deg, var(--pk-bg), var(--pk-bg-2));
}

a{
  color: var(--pk-accent-strong);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(242,222,138,.55);
}

:focus-visible{
  outline: none;
  box-shadow: var(--pk-focus);
  border-radius: 10px;
}

::selection{
  background: rgba(210,182,72,.22);
  color: var(--pk-text);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Main content typography ---------- */
.pk-main{
  color: var(--pk-text);
}

.pk-main h1,
.pk-main h2,
.pk-main h3{
  color: var(--pk-text);
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0 0 var(--pk-space-3);
}

.pk-main h1{
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.pk-main h2{
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.pk-main h3{
  font-size: 1.1rem;
  color: rgba(255,255,255,.88);
}

.pk-main p{
  color: var(--pk-text-muted);
  line-height: 1.75;
  margin: 0 0 var(--pk-space-4);
}

.pk-main p:last-child{ margin-bottom:0; }

/* ---------- Layout helpers ---------- */
.pk-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pk-space-4);
}

.pk-container--narrow{
  max-width: 980px;
}

.pk-section{
  display: flow-root;
  padding-block: var(--pk-space-8);
}

.pk-section--tight{
  padding-block: var(--pk-space-6);
}

/* ---------- Panels / cards ---------- */
.pk-panel{
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(210,182,72,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  padding: var(--pk-space-6);
  box-shadow: var(--pk-shadow);
  backdrop-filter: blur(10px);
}

.pk-panel--compact{
  padding: var(--pk-space-5);
}

.pk-panel--highlight{
  background:
    radial-gradient(900px 400px at 30% 0%, rgba(210,182,72,.16), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: var(--pk-accent-border);
  box-shadow: var(--pk-shadow-lg);
}

.pk-grid{
  --pk-grid-min: 240px;
  display: grid;
  gap: var(--pk-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--pk-grid-min), 100%), 1fr));
}

.pk-grid--min-260{
  --pk-grid-min: 260px;
}

.pk-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  padding: var(--pk-space-5);
  box-shadow: var(--pk-shadow-sm);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.pk-card:hover{
  transform: translateY(-2px);
  border-color: rgba(242,222,138,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  box-shadow: var(--pk-shadow);
}

.pk-card__title{
  margin: 0 0 var(--pk-space-2);
  font-size: 1.05rem;
  color: rgba(255,255,255,.90);
}

.pk-card__text{
  margin: 0;
  color: var(--pk-text-muted);
}

.pk-card__list{
  margin: 0;
  padding-left: 18px;
  color: var(--pk-text-muted);
}

.pk-card__list li{
  margin: 8px 0;
}

/* ---------- Buttons ---------- */
.pk-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-2);
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--pk-radius-sm);
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    color .14s ease,
    box-shadow .14s ease;
}

.pk-btn:active{
  transform: translateY(1px);
}

.pk-btn:focus-visible{
  outline: none;
  box-shadow: var(--pk-focus);
}

/* Primary: gold but controlled (info site) */
.pk-btn--primary{
  background: linear-gradient(180deg, rgba(210,182,72,.26), rgba(210,182,72,.16));
  border-color: rgba(210,182,72,.36);
  color: var(--pk-text);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

.pk-btn--primary:hover,
.pk-btn--primary:focus-visible{
  background: linear-gradient(180deg, rgba(210,182,72,.34), rgba(210,182,72,.20));
  border-color: rgba(242,222,138,.48);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  text-decoration: none;
}

/* Secondary: glassy neutral */
.pk-btn--secondary{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: var(--pk-text);
}

.pk-btn--secondary:hover,
.pk-btn--secondary:focus-visible{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  text-decoration: none;
}

/* Ghost: outline */
.pk-btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
}

.pk-btn--ghost:hover,
.pk-btn--ghost:focus-visible{
  background: rgba(255,255,255,.06);
  border-color: rgba(242,222,138,.22);
  color: var(--pk-text);
  text-decoration: none;
}

.pk-btn--lg{
  min-height: 48px;
  padding: 0 20px;
  font-size: 1rem;
}

.pk-btn-group{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-3);
  align-items: center;
}

.pk-btn-group--center{ justify-content: center; }
.pk-btn-group--muted{ opacity: .92; }

/* ---------- Chips ---------- */
.pk-chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 0.85rem;
  color: var(--pk-text-muted);
  backdrop-filter: blur(8px);
}

.pk-chip-group{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-2);
}

/* ---------- Hero / flow ---------- */
.pk-hero{
  text-align: center;
}

.pk-hero__title{
  margin-bottom: var(--pk-space-2);
  font-family: var(--pk-font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pk-lead{
  font-size: 1.06rem;
  margin: 0 auto;
  max-width: 860px;
  color: rgba(255,255,255,.74);
}

.pk-list{
  margin: 0;
  padding-left: 18px;
  color: var(--pk-text-muted);
}

.pk-list li{ margin: 8px 0; }

.pk-flow > * + *{ margin-top: var(--pk-space-4); }
.pk-flow--lg > * + *{ margin-top: var(--pk-space-6); }

/* =========================================================
   Top site header (brand + right-side links)
   ========================================================= */
.pk-site-header{
  background:
    linear-gradient(180deg, rgba(11,13,16,.85), rgba(11,13,16,.65));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.pk-site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-4);
  flex-wrap: wrap;
  padding-block: var(--pk-space-4);
}

.pk-site-header__brand{
  display: flex;
  align-items: center;
  gap: var(--pk-space-3);
  text-decoration: none;
}

.pk-site-header__logo{
  height: 44px;
  width: auto;
  display: block;
  border-radius: var(--pk-radius-sm);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.pk-site-header__brand-text{ line-height: 1.1; }

.pk-site-header__brand-name{
  font-family: var(--pk-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pk-text);
  font-size: 1.05rem;
}

.pk-site-header__brand-tagline{
  color: var(--pk-text-muted);
  font-size: 0.92rem;
}

.pk-site-header__links{
  display: flex;
  align-items: center;
  gap: var(--pk-space-3);
  flex-wrap: wrap;
}

/* =========================================================
   Sticky navigation (primary site menu)
   ========================================================= */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 1000;

  background:
    linear-gradient(180deg, rgba(11,13,16,.92), rgba(11,13,16,.78));
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

.site-nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}

.site-nav__brand{
  font-family: var(--pk-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.94);
  text-decoration: none;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-nav__brand:hover,
.site-nav__brand:focus{
  color: var(--pk-accent-strong);
  text-decoration: none;
}

.site-nav__menu{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  flex-wrap: wrap;
}

.site-nav__item{ position: relative; }

/* Modern pill links */
.site-nav__link{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration: none;

  color: rgba(255,255,255,.80);
  border: 1px solid transparent;

  background: transparent;
  transition:
    background .14s ease,
    border-color .14s ease,
    color .14s ease,
    transform .14s ease;
}

.site-nav__link:hover,
.site-nav__link:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

/* Active state: subtle gold */
.site-nav__item.is-active > .site-nav__link{
  background: rgba(210,182,72,.14);
  border-color: rgba(210,182,72,.28);
  color: rgba(255,255,255,.94);
}

/* Dropdown */
.site-nav__dropdown-menu{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 10px;
  list-style: none;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 220px at 30% 0%, rgba(210,182,72,.10), transparent 55%),
    linear-gradient(180deg, rgba(16,20,26,.92), rgba(12,15,19,.92));
  box-shadow: var(--pk-shadow-lg);
  backdrop-filter: blur(14px);
  z-index: 10;
}

.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:focus-within .site-nav__dropdown-menu{
  display: block;
}

/* Dropdown items */
.site-nav__dropdown-link{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus{
  background: rgba(255,255,255,.07);
  border-color: rgba(242,222,138,.18);
  color: rgba(255,255,255,.94);
  text-decoration: none;
}

/* CTA area */
.site-nav__cta{
  flex-shrink: 0;
}

/* Make CTA look intentional if it uses pk-btn classes, but still safe if it doesn't */
.site-nav__cta-link{
  border-radius: 999px;
  padding: 9px 14px;
  text-decoration: none;
}

/* Mobile */
@media (max-width: 900px){
  .site-nav__inner{
    flex-wrap: wrap;
    justify-content: center;
  }

  .site-nav__menu{
    justify-content: center;
    row-gap: 10px;
  }

  .site-nav__cta{
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .site-nav__dropdown-menu{
    left: 50%;
    transform: translateX(-50%);
    min-width: min(320px, 92vw);
  }
}

/* =========================================================
   Footer
   ========================================================= */
.pk-site-footer{
  margin-top: var(--pk-space-9);
  padding: var(--pk-space-7) var(--pk-space-4) var(--pk-space-8);
  background:
    radial-gradient(1000px 420px at 50% 0%, rgba(210,182,72,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,13,16,.85), rgba(11,13,16,.95));
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--pk-text-muted);
}

.pk-site-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--pk-space-4);
  text-align: center;
}

.pk-site-footer__heading{
  font-size: 0.95rem;
  color: rgba(255,255,255,.86);
}

.pk-site-footer__meta{
  font-size: 0.9rem;
  color: rgba(255,255,255,.62);
}

.pk-site-footer__version{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,.86);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.pk-site-footer__note{
  font-size: 0.85rem;
  color: rgba(255,255,255,.52);
  margin-top: var(--pk-space-2);
}

/* =========================================================
   Header polish (logo size + layout hygiene)
   Drop this near the bottom of pixlkey-site.css
   ========================================================= */

/* Header container: keep it tight + elegant */
.pk-site-header__inner{
  padding-block: clamp(12px, 1.4vw, 18px);
  gap: var(--pk-space-4);
}

/* Brand block: allow wrapping without looking busted */
.pk-site-header__brand{
  flex: 1 1 520px;
  min-width: 280px;
  gap: 12px;
  align-items: center;
}

/* Logo: make it feel like a mark, not a billboard */
.pk-site-header__logo{
  height: 34px;      /* was 44px */
  width: 34px;       /* enforce square-ish so it behaves */
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px;      /* gives breathing room around PNG */
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
}

/* Brand text: constrain + better vertical rhythm */
.pk-site-header__brand-text{
  display: grid;
  gap: 2px;
  min-width: 0; /* allows ellipsis to work */
}

/* Name: slightly smaller and calmer, still Orbitron */
.pk-site-header__brand-name{
  font-size: 1rem;
  letter-spacing: .06em;
  line-height: 1.1;
}

/* Tagline: prevent it from running wild on wide screens */
.pk-site-header__brand-tagline{
  max-width: 60ch;
  line-height: 1.35;
  color: rgba(255,255,255,.68);
  font-size: 0.92rem;
}

/* Quick links: make them "header buttons" not full nav pills */
.pk-site-header__links{
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 10px;
}

/* Tighten the .site-nav__link when used inside the header */
.pk-site-header__links .site-nav__link{
  padding: 8px 12px;
  font-size: 0.92rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}

/* Make the primary quick link feel like a clear CTA */
.pk-site-header__links .site-nav__link:first-child{
  background: rgba(210,182,72,.14);
  border-color: rgba(210,182,72,.26);
  color: rgba(255,255,255,.92);
}

.pk-site-header__links .site-nav__link:first-child:hover,
.pk-site-header__links .site-nav__link:first-child:focus{
  background: rgba(210,182,72,.20);
  border-color: rgba(242,222,138,.34);
}

/* Prevent the header from feeling cramped on smaller widths */
@media (max-width: 900px){
  .pk-site-header__inner{
    justify-content: center;
    text-align: center;
  }

  .pk-site-header__brand{
    justify-content: center;
  }

  .pk-site-header__brand-tagline{
    max-width: 42ch;
    margin: 0 auto;
  }

  .pk-site-header__links{
    width: 100%;
    justify-content: center;
  }
}

/* Ultra small: let the tagline gracefully drop out */
@media (max-width: 460px){
  .pk-site-header__brand-tagline{
    display: none;
  }
}

/* =========================================
   Dropdown hover stability (prevents flicker)
   ========================================= */

/* Ensure dropdown anchor area is solid */
.site-nav__dropdown {
  position: relative;
}

/* IMPORTANT: don't push the menu away from the trigger */
.site-nav__dropdown-menu {
  top: 100%;              /* was calc(100% + 10px) in the redesign */
  margin-top: 0 !important;
}

/* Create an invisible hover "bridge" between trigger and dropdown */
.site-nav__dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;           /* the bridge depth; tweak 10–18px if needed */
  background: transparent;
}

/* If your dropdown is centred on mobile with transform, keep it stable */
@media (max-width: 900px) {
  .site-nav__dropdown::after {
    left: 50%;
    right: auto;
    width: min(320px, 92vw);
    transform: translateX(-50%);
  }
}

/* Optional: make dropdown feel more "attached" visually */
.site-nav__dropdown-menu {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* =========================================================
   About page content polish
   Append near the bottom of pixlkey-site.css
   ========================================================= */

/* A consistent display heading (brand-heading is used across pages) */
.brand-heading{
  font-family: var(--pk-font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* A small “kicker” label above titles */
.pk-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: .85rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

.pk-kicker::before{
  content: "";
  width: 16px;
  height: 1px;
  background: rgba(242,222,138,.50);
  box-shadow: 0 0 0 1px rgba(242,222,138,.10);
}

/* Section divider that feels “premium” */
.pk-divider{
  border: 0;
  height: 1px;
  margin: var(--pk-space-6) 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.14),
    rgba(242,222,138,.22),
    rgba(255,255,255,.14),
    transparent
  );
}

/* About page layout tweaks */
.pk-about__panel{
  padding: clamp(18px, 2.2vw, 28px);
}

.pk-about__title{
  margin-top: 0;
}

/* About grid: let cards breathe a bit more */
.pk-about__grid{
  margin-top: var(--pk-space-2);
}

/* Callout block: “glass + gold edge” */
.pk-callout{
  margin-top: var(--pk-space-6);
  padding: var(--pk-space-6);
  border-radius: var(--pk-radius-lg);
  border: 1px solid rgba(210,182,72,.22);
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(210,182,72,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--pk-shadow);
  backdrop-filter: blur(10px);
}

.pk-callout__title{
  margin: 0 0 var(--pk-space-2);
  color: rgba(255,255,255,.92);
}

.pk-callout__text{
  margin: 0 0 var(--pk-space-4);
  color: rgba(255,255,255,.72);
  line-height: 1.75;
}

/* A small “note” bar for pragmatic guidance */
.pk-note{
  margin-top: var(--pk-space-5);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.pk-note__text{
  margin: 0;
  color: rgba(255,255,255,.70);
  line-height: 1.65;
}

/* Responsive tightening */
@media (max-width: 700px){
  .pk-callout{
    padding: var(--pk-space-5);
  }
}