/* Heapless: the shared default design (/platform/platform.css), turned into a dark code editor through its variables.
   Lagoon blue is the accent; lime, yellow, violet and orange are the "syntax" colours. */
:root {
  --pf-accent: #22d3ee;
  --pf-accent-ink: #07131a;
  --pf-ink: #e6e9f2;
  --pf-muted: #9aa3b8;
  --pf-surface: #0d1017;
  --pf-surface-alt: #141925;
  --pf-dark: #07090e;
  --pf-line: #252c3d;
  --pf-radius: 12px;
  --pf-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --pf-heading-font: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, Consolas, monospace;
  --hl-mono: var(--pf-heading-font);
  --hl-cyan: #22d3ee;
  --hl-lime: #a3e635;
  --hl-yellow: #fde047;
  --hl-violet: #a78bfa;
  --hl-orange: #fb923c;
  --hl-comment: #5b6680;
  color-scheme: dark;
}

/* Light scheme (Platform:ColorSchemes): a soft grey-blue editor theme rather than glaring white; syntax colours darkened. */
:root[data-color-scheme="light"] {
  --pf-accent: #0891b2;
  --pf-accent-ink: #ffffff;
  --pf-ink: #111827;
  --pf-muted: #475163;
  --pf-surface: #e6eaf0;
  --pf-surface-alt: #f0f3f7;
  --pf-line: #cbd3de;
  --hl-cyan: #0e7490;
  --hl-lime: #4d7c0f;
  --hl-yellow: #b45309;
  --hl-violet: #7c3aed;
  --hl-orange: #c2410c;
  --hl-comment: #6b7690;
  --hl-error: #be123c;
}
/* The footer and image headers stay dark in both schemes, so they keep the dark syntax colours. */
:root[data-color-scheme="light"] :is(.site-footer, .project-hero, .category-tile) { --pf-line: #252c3d; --hl-cyan: #22d3ee; --hl-lime: #a3e635; --hl-comment: #8590a8; }
:root[data-color-scheme="light"] .card:hover { box-shadow: 0 18px 40px -26px var(--hl-c); }

::selection { background: var(--pf-accent); color: var(--pf-accent-ink); }
h1, h2, h3 { letter-spacing: -0.03em; }
a { color: var(--hl-cyan); }
code { padding: 0.1em 0.4em; border-radius: 6px; background: var(--pf-surface-alt); color: var(--hl-lime); font-family: var(--hl-mono); font-size: 0.9em; }

/* Eyebrows read like code comments; buttons and small labels are monospace. */
.eyebrow { font-family: var(--hl-mono); letter-spacing: 0.04em; text-transform: none; color: var(--hl-comment); }
.eyebrow::before { content: "// "; color: var(--hl-comment); }
.btn, .badge, .plan__badge, .filter, .lang-switch, .link-arrow, .step__node::before { font-family: var(--hl-mono); }
.btn--ghost { color: var(--hl-lime); border-color: var(--hl-lime); }
.btn--ghost:hover { background: color-mix(in srgb, var(--hl-lime) 12%, transparent); }
.btn--accent { box-shadow: 0 0 0 0 var(--pf-accent); transition: box-shadow 0.2s ease; }
.btn--accent:hover { box-shadow: 0 0 24px -4px var(--pf-accent); }
.link-arrow { color: var(--hl-cyan); }

/* Header: nearly solid. A backdrop blur made scrolling stutter (as on Alive Fitness). */
.site-header { background: color-mix(in srgb, var(--pf-surface) 96%, transparent); }
.lang-switch a[aria-current="true"] { color: var(--hl-lime); }
/* Menu like editor tabs: a fixed height so the text sits centred, a quiet hover, and the current page in the
   accent with a bar under it. */
.nav a { position: relative; display: flex; align-items: center; height: 36px; padding: 0 0.85rem; border-radius: 8px; line-height: 1; transition: color 0.15s ease, background-color 0.15s ease; }
.nav a:hover { color: var(--pf-ink); background: color-mix(in srgb, var(--pf-ink) 7%, transparent); }
.nav a[aria-current="page"] { color: var(--hl-cyan); background: transparent; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pf-accent), var(--hl-lime)); }
.nav a[aria-current="page"]:hover { background: color-mix(in srgb, var(--pf-accent) 10%, transparent); }
@media (max-width: 1100px) { .nav a { padding: 0 0.6rem; } .nav a[aria-current="page"]::after { left: 0.6rem; right: 0.6rem; } }
/* Phone menu (a column): the bar sits on the left like a selected file in the explorer. */
@media (max-width: 860px) {
  .nav a { height: 44px; padding: 0 0.9rem; }
  .nav a[aria-current="page"] { background: color-mix(in srgb, var(--pf-accent) 10%, transparent); }
  .nav a[aria-current="page"]::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; background: linear-gradient(180deg, var(--pf-accent), var(--hl-lime)); }
}
/* The slogan would wrap next to the menu and search on phones. */
@media (max-width: 480px) { .brand__name small { display: none; } }

/* Hero: a dotted grid with lagoon and lime glows; the highlighted last word gets a blinking block cursor. */
.hero {
  background:
    radial-gradient(40rem 26rem at 85% 20%, color-mix(in srgb, var(--pf-accent) 22%, transparent), transparent 70%),
    radial-gradient(34rem 24rem at 5% 90%, color-mix(in srgb, var(--hl-lime) 12%, transparent), transparent 70%),
    radial-gradient(circle, var(--pf-line) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--pf-surface);
}
.hero { position: relative; isolation: isolate; overflow: hidden; }
/* AI theme: a slowly drifting violet-to-lagoon aurora behind the hero, and the highlighted word in the same gradient.
   Soft radial gradients turned on the compositor; a blur filter here was re-rendered every frame and made scrolling jerky. */
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(28% 34% at 62% 32%, color-mix(in srgb, var(--hl-violet) 24%, transparent), transparent),
    radial-gradient(26% 30% at 78% 52%, color-mix(in srgb, var(--pf-accent) 20%, transparent), transparent);
  animation: hl-aurora 18s linear infinite;
}
.hero h1 em {
  color: var(--pf-accent);
  background: linear-gradient(90deg, var(--hl-violet), var(--pf-accent), var(--hl-lime), var(--hl-violet)) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: hl-shimmer 8s linear infinite;
}
/* A static glow behind the animated illustration: a drop-shadow filter on it was recalculated every frame. */
.hero__art { background: radial-gradient(closest-side, color-mix(in srgb, var(--hl-violet) 22%, transparent), transparent); }
@keyframes hl-aurora { to { transform: rotate(360deg); } }
@keyframes hl-shimmer { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero h1 em { animation: none; } }
.hero h1::after { content: ""; display: inline-block; width: 0.5em; height: 0.9em; margin-left: 0.15em; vertical-align: -0.08em; background: var(--hl-yellow); animation: hl-blink 1.1s steps(1) infinite; }
.hero .eyebrow { color: var(--hl-lime); }
.hero .eyebrow::before { content: "❯ "; color: var(--pf-accent); }
@keyframes hl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1::after { animation: none; } }

/* Cards as editor panes: a coloured top edge and icon per kind, a glow on hover. */
.card { --hl-c: var(--pf-accent); background: var(--pf-surface-alt); border-top: 2px solid var(--hl-c); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px var(--hl-c); }
.card__icon { background: color-mix(in srgb, var(--hl-c) 14%, transparent); color: var(--hl-c); }
.card h3 { font-size: 1.05rem; }
[data-icon="building"] { --hl-c: var(--hl-cyan); }
[data-icon="grid"] { --hl-c: var(--hl-violet); }
[data-icon="bolt"] { --hl-c: var(--hl-yellow); }
[data-icon="shield"] { --hl-c: var(--hl-lime); }
[data-icon="light"] { --hl-c: var(--hl-orange); }
[data-icon="check"] { --hl-c: var(--hl-lime); }
[data-icon="file"] { --hl-c: var(--hl-violet); }[data-icon="clock"] { --hl-c: var(--hl-cyan); }

/* Project covers are text-heavy screenshots: blur and darken them so titles over them stay readable. */
.project-hero__bg, .category-tile img { filter: blur(6px) brightness(0.55); transform: scale(1.06); }
.project-hero { overflow: hidden; }
.project-hero::before { background: linear-gradient(90deg, rgb(7 9 14 / 88%), rgb(7 9 14 / 55%)); }
.category-tile::before { background: linear-gradient(90deg, rgb(7 9 14 / 85%), rgb(7 9 14 / 45%)); }

/* Process steps numbered like line numbers. */
.step__node::before { content: "0" counter(step) " →"; color: var(--hl-yellow); }

/* Pricing, news, testimonials and forms on the dark surfaces. */
.plan, .news-card, .testimonial, .faq__item, .download { background: var(--pf-surface-alt); }
.plan--highlight { box-shadow: 0 0 40px -12px var(--pf-accent); }
.plan__features svg { color: var(--hl-lime); }
.member__role { color: var(--hl-cyan); }
.field input, .field textarea, .search-form input, .newsletter__row input { background: var(--pf-surface); color: var(--pf-ink); border-color: var(--pf-line); }
.field input:focus, .field textarea:focus, .search-form input:focus, .newsletter__row input:focus { outline: 2px solid var(--hl-cyan); outline-offset: 1px; }
.form-card { background: var(--pf-surface-alt); }
.alert { background: color-mix(in srgb, var(--hl-lime) 14%, transparent); color: var(--hl-lime); }
.field__error, .form__error { color: var(--hl-error, #ff6b8b); }

/* Call to action: a terminal window with a lagoon-to-yellow edge. */
.cta {
  border: 1px solid transparent;
  background: linear-gradient(var(--pf-surface-alt), var(--pf-surface-alt)) padding-box, linear-gradient(110deg, var(--pf-accent), var(--hl-lime), var(--hl-yellow)) border-box;
  color: var(--pf-ink);
}
.cta h2::before { content: "❯ "; color: var(--pf-accent); }
.cta .btn { background: var(--pf-accent); color: var(--pf-accent-ink); }

.site-footer { border-top: 1px solid var(--pf-line); }
.footer-grid h3 { font-family: var(--hl-mono); color: var(--hl-comment); }

/* Dark buttons would vanish on the dark surfaces: outline them, and make form submits the accent. */
.btn--dark { background: var(--pf-surface); border-color: var(--pf-line); color: var(--pf-ink); }
.btn--dark:hover { border-color: var(--hl-cyan); color: var(--hl-cyan); }
.form-card button[type="submit"] { background: var(--pf-accent); border-color: var(--pf-accent); color: var(--pf-accent-ink); }