:root {
  --bg: #ffffff; --fg: #0b0b0b; --muted: #5a5a5a;
  --card: #f5f5f5; --card-border: #e9e9e9; --accent: #3a86ff;
  --radius: 16px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0b0b; --fg:#f4f4f4; --muted:#b0b0b0; --card:#121212; --card-border:#1e1e1e; --accent:#7ab3ff; }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none} a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.wrapper{max-width:720px;margin:0 auto;padding:32px 20px 24px;display:grid;gap:20px}
/* Cycloid banner */
.cycloid{width:100%;height:72px;overflow:hidden;position:relative}
.cycloid svg{width:100%;height:100%;display:block}
/* Responsive height scaling for mobile */
@media (max-width: 480px) {
  .cycloid{height:clamp(60px, 15vw, 72px)}
}
.baseline,.tick{stroke:var(--card-border);stroke-width:1;vector-effect:non-scaling-stroke}
.trace{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wheel{stroke:var(--accent);stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke}
.spoke{stroke:var(--accent);stroke-width:1.2;opacity:.85;vector-effect:non-scaling-stroke}
.marker,.dot{fill:var(--accent)}
header{display:grid;gap:10px;padding-top:8px;padding-bottom:6px}
.name{font-size:clamp(28px,4vw,36px);font-weight:750;letter-spacing:-.02em}
.title{font-size:16px;color:var(--muted)} .tag{font-size:17px}
.cards{display:grid;gap:12px}
.card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;padding:14px 16px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .06s ease, background .2s ease}
.card:hover{transform:translateY(-1px)} .icon{width:28px;height:28px;opacity:.96}
.card-main{display:grid;gap:2px} .card-title{font-weight:650} .card-desc{font-size:14px;color:var(--muted)} .arrow{opacity:.5}
.section-label{margin-top:6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
footer{margin-top:6px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:780px){.wrapper{padding-top:56px}}
@media (prefers-reduced-motion:reduce){.cycloid{display:none}}
/* tick styles: major = cusp spacing (2πr), minor = half-turn (πr) */
.cycloid .tick-major { stroke: var(--card-border); stroke-width: 1.4; opacity: 0.9; vector-effect: non-scaling-stroke; }
.cycloid .tick-minor { stroke: var(--card-border); stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; }
/* footer social toolbar */
.social { display:flex; gap:14px; align-items:center; }
.social a { display:inline-flex; width:22px; height:22px; opacity:.9; }
.social a:hover { opacity:1; }
.social a svg { fill: var(--accent); }
/* elevator pitch */
.pitch ul { margin: 0; padding-left: 18px; color: var(--muted); }
.pitch li { margin: 2px 0; }