/* ============================================================
   PIXYcal — Colors & Type (WARM GRADIENT ERA — v3)
   Replaces cold electric-lime with warm rose → orange → amber
   gradient accent system. Dark base surfaces unchanged.
   ============================================================ */

/* ── Self-hosted fonts ───────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── WARM GRADIENT ACCENT ────────────────────────────── */
  /* Replaces the cold electric lime (#C6FF00) era.         */
  --px-accent-a:           #D4477A;   /* rose — primary */
  --px-accent-b:           #E8622F;   /* orange — energy */
  --px-accent-c:           #F5A82A;   /* amber — warmth */
  --px-accent-d:           #A865E0;   /* purple — depth */

  /* Gradient shorthands */
  --px-gradient:           linear-gradient(135deg, #D4477A 0%, #E8622F 55%, #F5A82A 100%);
  --px-gradient-wide:      linear-gradient(135deg, #A865E0 0%, #D4477A 35%, #E8622F 70%, #F5A82A 100%);
  --px-gradient-subtle:    linear-gradient(135deg, rgba(212,71,122,0.12) 0%, rgba(232,98,47,0.10) 55%, rgba(245,168,42,0.08) 100%);
  --px-gradient-radial:    radial-gradient(ellipse at 60% 40%, rgba(212,71,122,0.18), rgba(232,98,47,0.12) 50%, transparent 75%);

  /* Primary = rose (for single-color contexts) */
  --px-accent:             #D4477A;
  --px-accent-soft:        #E0608E;   /* hover / lighter */
  --px-accent-muted:       #B83565;   /* pressed / deeper */
  --px-accent-dim:         #8A2548;   /* very dim */
  --px-accent-deep:        #5A1530;   /* darkest accent surface */
  --px-on-accent:          #FFFFFF;   /* text on warm accent */

  /* Legacy alias (for components still referencing old lime token) */
  --px-signal-green:       #7CFF38;

  /* ── Dark base (unchanged from v2) ──────────────────── */
  --px-bg:                 #050505;
  --px-logo-black:         #0A0A0A;
  --px-white:              #FFFFFF;

  /* ── Surface scale ──────────────────────────────────── */
  --px-surface-0:          #050505;   /* page background */
  --px-surface-1:          #0A0A0A;   /* header / footer / inputs */
  --px-surface-2:          #111111;   /* default card */
  --px-surface-3:          #171717;   /* hover / elevated */
  --px-surface-4:          #1F1F1F;   /* selected / inner panel */
  --px-surface-5:          #2A2A2A;   /* rare high-contrast layer */

  /* ── Foreground hierarchy ───────────────────────────── */
  --px-text-strong:        #F4F4F0;   /* hero headlines, H1–H2 */
  --px-text:               #D8D8D0;   /* default body */
  --px-text-muted:         #9A9A92;   /* metadata, supporting */
  --px-text-subtle:        #66665F;   /* disabled / decorative */

  /* ── Lines ─────────────────────────────────────────── */
  --px-line-soft:          #191916;
  --px-line:               #242420;   /* default border */
  --px-line-strong:        #3A3A36;   /* hover / active border */

  /* ── Semantic ──────────────────────────────────────── */
  --px-success:            #66E356;
  --px-warning:            #F0E85A;
  --px-error:              #FF4D4D;
  --px-error-soft:         #FF9AA2;
  --px-info:               #6EE7F9;

  /* ── Warm glow + focus ─────────────────────────────── */
  --px-glow:               0 0 16px rgba(212,71,122,0.18);
  --px-glow-strong:        0 0 28px rgba(212,71,122,0.32);
  --px-glow-warm:          0 0 28px rgba(232,98,47,0.22);
  --px-glow-dot:           0 0 12px rgba(212,71,122,0.50);
  --px-focus-ring:         0 0 0 3px rgba(212,71,122,0.18);

  /* ── Accent tint overlays ───────────────────────────── */
  --px-accent-tint-04:     rgba(212,71,122,0.04);
  --px-accent-tint-06:     rgba(212,71,122,0.06);
  --px-accent-tint-08:     rgba(212,71,122,0.08);

  /* ── Type families ──────────────────────────────────── */
  --px-font-display:       "Space Grotesk", system-ui, sans-serif;
  --px-font-sans:          "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --px-font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Spacing ────────────────────────────────────────── */
  --px-space-hairline:     1px;
  --px-space-2xs:          4px;
  --px-space-xs:           8px;
  --px-space-sm:           12px;
  --px-space-md:           16px;
  --px-space-lg:           24px;
  --px-space-xl:           32px;
  --px-space-2xl:          48px;
  --px-space-3xl:          64px;
  --px-space-4xl:          96px;
  --px-section-sm:         80px;
  --px-section-md:         112px;
  --px-section-lg:         144px;
  --px-gutter:             24px;
  --px-container:          1180px;

  /* ── Radius — ALL ZERO (sharp brand identity) ───────── */
  --px-radius:             0px;

  /* ── Motion ─────────────────────────────────────────── */
  --px-easing:             cubic-bezier(0.16, 1, 0.3, 1);
  --px-dur-hover:          150ms;
  --px-dur-reveal:         280ms;
  --px-dur-scramble:       700ms;
}

/* ============================================================
   Base styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body, .px-body {
  font-family: var(--px-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--px-text);
  background: var(--px-bg);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(212,71,122,0.88);
  color: #fff;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; }

/* ============================================================
   Semantic type classes
   ============================================================ */

/* ── Display ─────────────────────────────────────── */
.px-display-xl {
  font-family: var(--px-font-display);
  font-size: 96px; font-weight: 700;
  line-height: 0.92; letter-spacing: -0.06em;
  color: var(--px-text-strong);
}
.px-display-lg, .px-h1 {
  font-family: var(--px-font-display);
  font-size: 72px; font-weight: 700;
  line-height: 0.94; letter-spacing: -0.055em;
  color: var(--px-text-strong);
}
.px-display-md {
  font-family: var(--px-font-display);
  font-size: 56px; font-weight: 700;
  line-height: 1; letter-spacing: -0.045em;
  color: var(--px-text-strong);
}

/* ── Headlines ───────────────────────────────────── */
.px-headline-lg, .px-h2 {
  font-family: var(--px-font-display);
  font-size: 40px; font-weight: 700;
  line-height: 1.05; letter-spacing: -0.035em;
  color: var(--px-text-strong);
}
.px-headline-md, .px-h3 {
  font-family: var(--px-font-display);
  font-size: 32px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.03em;
  color: var(--px-text-strong);
}
.px-headline-sm, .px-h4 {
  font-family: var(--px-font-display);
  font-size: 24px; font-weight: 700;
  line-height: 1.16; letter-spacing: -0.02em;
  color: var(--px-text-strong);
}

/* ── Body ────────────────────────────────────────── */
.px-body-lg {
  font-family: var(--px-font-sans);
  font-size: 20px; font-weight: 400;
  line-height: 1.55; letter-spacing: -0.01em;
  color: var(--px-text-muted);
}
.px-body-md, .px-p {
  font-family: var(--px-font-sans);
  font-size: 16px; font-weight: 400;
  line-height: 1.6; color: var(--px-text);
}
.px-body-sm {
  font-family: var(--px-font-sans);
  font-size: 14px; font-weight: 400;
  line-height: 1.55; color: var(--px-text-muted);
}

/* ── Labels ──────────────────────────────────────── */
.px-label-lg {
  font-family: var(--px-font-sans);
  font-size: 14px; font-weight: 700;
  line-height: 1; letter-spacing: -0.01em;
  color: var(--px-text-strong);
}
.px-label-md {
  font-family: var(--px-font-sans);
  font-size: 12px; font-weight: 700;
  line-height: 1; letter-spacing: 0.02em;
  color: var(--px-text-strong);
}
.px-eyebrow, .px-label-caps {
  font-family: var(--px-font-mono);
  font-size: 11px; font-weight: 700;
  line-height: 1; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--px-accent-c);   /* amber for eyebrows */
}

/* ── Mono / Data ─────────────────────────────────── */
.px-mono-md, .px-code {
  font-family: var(--px-font-mono);
  font-size: 13px; font-weight: 500;
  line-height: 1.35; letter-spacing: -0.02em;
  color: var(--px-text);
}
.px-mono-sm {
  font-family: var(--px-font-mono);
  font-size: 11px; font-weight: 500;
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--px-text-muted);
}

/* ============================================================
   Accent / color utility classes
   ============================================================ */

/* Gradient text treatment — apply to 1–3 key words */
.px-gradient-text {
  background: var(--px-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.px-gradient-text-wide {
  background: var(--px-gradient-wide);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.px-accent-a   { color: var(--px-accent-a); }
.px-accent-b   { color: var(--px-accent-b); }
.px-accent-c   { color: var(--px-accent-c); }
.px-accent-d   { color: var(--px-accent-d); }
.px-strong     { color: var(--px-text-strong); }
.px-muted      { color: var(--px-text-muted); }
.px-subtle     { color: var(--px-text-subtle); }

/* ============================================================
   Layout helpers
   ============================================================ */

.px-container {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}
@media (min-width: 768px) { .px-container { width: min(100% - 64px, 1180px); } }
@media (min-width: 1180px) { .px-container { width: min(100% - 128px, 1180px); } }

/* ============================================================
   Component tokens — Buttons
   ============================================================ */

.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px;
  font-family: var(--px-font-sans); font-weight: 700; font-size: 14px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  border-radius: var(--px-radius);
  transition:
    background var(--px-dur-hover) var(--px-easing),
    color var(--px-dur-hover) var(--px-easing),
    border-color var(--px-dur-hover) var(--px-easing),
    transform var(--px-dur-hover) var(--px-easing),
    box-shadow var(--px-dur-hover) var(--px-easing);
}
.px-btn.primary {
  background: var(--px-gradient);
  color: var(--px-on-accent);
  box-shadow: var(--px-glow);
}
.px-btn.primary:hover {
  background: linear-gradient(135deg, #E0608E 0%, #F07050 55%, #F8BB45 100%);
  box-shadow: var(--px-glow-strong);
  transform: translateY(-2px);
}
.px-btn.primary:active { transform: scale(0.97); box-shadow: var(--px-glow); }
.px-btn.secondary {
  background: var(--px-surface-2);
  border-color: var(--px-line-strong);
  color: var(--px-text-strong);
}
.px-btn.secondary:hover {
  background: var(--px-surface-3);
  border-color: var(--px-accent-a);
}
.px-btn.ghost {
  background: transparent;
  color: var(--px-text-muted);
  height: 40px; padding: 0 12px;
}
.px-btn.ghost:hover { color: var(--px-text-strong); }
.px-btn[disabled] {
  background: var(--px-surface-4);
  color: var(--px-text-subtle);
  pointer-events: none; box-shadow: none;
}

/* ── CTA pulse animation (header + hero buttons) ── */
@keyframes px-cta-breathe {
  0%, 100% { transform: scale(1);     box-shadow: 0 0 16px rgba(212,71,122,0.22); }
  50%      { transform: scale(1.035); box-shadow: 0 0 26px rgba(212,71,122,0.36); }
}
.px-cta-pulse {
  animation: px-cta-breathe 2.8s ease-in-out infinite;
  will-change: transform, box-shadow;
  transform-origin: center;
}
.px-cta-pulse:hover,
.px-cta-pulse:focus-visible,
.px-cta-pulse:active { animation: none; }

/* ============================================================
   Component tokens — Cards
   ============================================================ */

.px-card {
  position: relative; padding: 24px;
  background: var(--px-surface-2);
  border: 1px solid var(--px-line);
  border-radius: var(--px-radius);
  transition:
    background var(--px-dur-hover) var(--px-easing),
    border-color var(--px-dur-hover) var(--px-easing),
    transform var(--px-dur-hover) var(--px-easing);
}
.px-card.feature { padding: 32px; }
.px-card:hover {
  background: var(--px-surface-3);
  border-color: var(--px-line-strong);
  transform: translateY(-2px);
}
.px-card.with-spark:hover::after {
  content: "";
  position: absolute; top: 10px; right: 10px;
  width: 6px; height: 6px;
  background: var(--px-accent-a);
  box-shadow: var(--px-glow-dot);
}

/* ============================================================
   Component tokens — Badges
   ============================================================ */

.px-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  font-family: var(--px-font-mono);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--px-radius);
}
.px-badge.outline {
  background: var(--px-surface-1);
  border: 1px solid var(--px-line);
  color: var(--px-text-muted);
}
.px-badge.accent {
  background: var(--px-gradient);
  color: var(--px-on-accent);
}
.px-badge.rose-outline {
  background: transparent;
  border: 1px solid var(--px-accent-a);
  color: var(--px-accent-a);
}
.px-badge.amber {
  background: transparent;
  border: 1px solid var(--px-accent-c);
  color: var(--px-accent-c);
}

/* ============================================================
   Component tokens — Inputs
   ============================================================ */

.px-input, .px-textarea {
  height: 48px; padding: 0 16px; width: 100%;
  background: var(--px-surface-1);
  border: 1px solid var(--px-line);
  color: var(--px-text-strong);
  font-family: var(--px-font-sans); font-size: 14px;
  border-radius: var(--px-radius);
  transition:
    border-color var(--px-dur-hover) var(--px-easing),
    box-shadow var(--px-dur-hover) var(--px-easing);
}
.px-textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.px-input::placeholder, .px-textarea::placeholder { color: var(--px-text-subtle); }
.px-input:focus, .px-textarea:focus {
  outline: none;
  border-color: var(--px-accent-a);
  box-shadow: var(--px-focus-ring);
}

/* ============================================================
   Structural patterns
   ============================================================ */

/* Dot-grid background */
.px-dot-field {
  background-image: radial-gradient(circle, rgba(244,244,240,0.16) 1px, transparent 1px);
  background-size: 13px 13px;
}
.px-dot-field-warm {
  background-image: radial-gradient(circle, rgba(212,71,122,0.7) 1px, transparent 1px);
  background-size: 13px 13px;
}

/* Panel chrome */
.px-panel-wrap {
  position: relative; padding: 12px;
  background: var(--px-surface-1);
  border: 1px solid var(--px-line-strong);
  overflow: hidden;
}
.px-panel-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(212,71,122,0.08), transparent 42%);
}
.px-panel { position: relative; background: var(--px-bg); border: 1px solid var(--px-line); }
.px-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--px-line);
}
.px-panel-head .dots { display: flex; gap: 8px; }
.px-panel-head .dots span { width: 10px; height: 10px; }
.px-panel-head .dots .d1 { background: var(--px-accent-a); box-shadow: var(--px-glow); }
.px-panel-head .dots .d2 { background: var(--px-line-strong); }
.px-panel-head .dots .d3 { background: var(--px-line); }

/* Sticky header */
.px-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5,5,5,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--px-line);
  transition: opacity 500ms var(--px-easing), transform 500ms var(--px-easing);
}

/* Section template */
.px-section {
  position: relative;
  padding-block: 96px;
  border-bottom: 1px solid var(--px-line);
  scroll-margin-top: 92px;
}
@media (min-width: 1024px) { .px-section { padding-block: 128px; } }

/* ============================================================
   Animation / reveal system
   ============================================================ */

@keyframes px-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.px-reveal { animation: px-reveal 320ms var(--px-easing) both; }

/* Intersection-observer driven reveal */
.px-io {
  opacity: 0; transform: translateY(16px);
  transition: opacity 480ms var(--px-easing), transform 480ms var(--px-easing);
}
.px-io.in { opacity: 1; transform: translateY(0); }

/* Status pulse dot (header) */
@keyframes px-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,71,122,0.8); }
  60%  { box-shadow: 0 0 0 7px rgba(212,71,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,71,122,0); }
}
.px-status-dot {
  animation: px-status-pulse 2.2s var(--px-easing) infinite;
}

/* Scroll ticker loop */
@keyframes px-ticker-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.px-ticker-loop { animation: px-ticker-loop 58s linear infinite; }

/* Bar fill (service visualizations) */
@keyframes px-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(var(--w, 1)); }
}

/* ============================================================
   Focus ring
   ============================================================ */
:focus-visible {
  outline: 1px solid var(--px-accent-a);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}