/* recyco.io: the company site (23 October 2026). Light and plain, so it
   reads as the company, not the app; Orby's fonts, kept on this site. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 650; font-display: swap; src: url("/fonts/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/figtree.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --band: #f7f3f9;
  --text: #1c1520;
  --quiet: #5f5466;
  --line: #e6dfea;
  --plum: #5b2484;
  --rose: #b53e8c;
  --display: "Fraunces", Georgia, serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #120d15; --band: #1c1520; --text: #f4eef6; --quiet: #b9abc0; --line: #2e2433; --plum: #c590e6; --rose: #ff8ac9; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--body); }
a { color: var(--plum); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.top { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { font: 600 1.25rem var(--display); color: var(--text); text-decoration: none; }
nav { display: flex; gap: 18px; flex-wrap: wrap; }
nav a { color: var(--quiet); text-decoration: none; font-size: .95rem; }
nav a:hover { color: var(--text); }

.hero { padding: 72px 0 56px; }
.kicker { margin: 0 0 8px; color: var(--rose); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
h1 { font: 600 clamp(2rem, 5vw, 3.1rem)/1.15 var(--display); margin: 0 0 18px; max-width: 18em; }
h2 { font: 600 1.7rem/1.2 var(--display); margin: 0 0 14px; }
h3 { font: 600 1.1rem/1.3 var(--body); margin: 0 0 6px; }
.lead { font-size: 1.15rem; color: var(--quiet); max-width: 40em; }
.button { display: inline-block; margin-top: 8px; padding: 12px 22px; border-radius: 999px; background: var(--plum); color: #fff; text-decoration: none; font-weight: 600; }
@media (prefers-color-scheme: dark) { .button { color: #120d15; } }

section { padding: 56px 0; }
.band { background: var(--band); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 20px; } }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
.cards article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.cards p { margin: 0; color: var(--quiet); }

.details { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.details dt { color: var(--quiet); }
.details dd { margin: 0; }

footer { border-top: 1px solid var(--line); padding: 24px 0; font-size: .9rem; color: var(--quiet); }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer a { color: var(--quiet); }