@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --radius: 0.75rem;
  --background: oklch(96.99% 0 107);
  --foreground: oklch(0.1 0 0);
  --surface: oklch(98.51% 0 107);
  --surface-raised: oklch(99.99% 0 107);
  --card: oklch(99.99% 0 107);
  --card-foreground: oklch(0.1 0 0);
  --popover: oklch(99.99% 0 107);
  --primary: oklch(52.43% 0.2396 264.41);
  --primary-foreground: oklch(99.5% 0 0);
  --secondary: oklch(95.49% 0 107);
  --secondary-foreground: oklch(0.3 0.001 107);
  --muted: oklch(95.49% 0 107);
  --muted-foreground: oklch(50% 0.001 107);
  --accent: oklch(52.43% 0.2396 264.41);
  --accent-foreground: oklch(99.5% 0 0);
  --destructive: oklch(58.53% 0.2203 26.56);
  --destructive-foreground: oklch(98.5% 0 0);
  --border: oklch(85.12% 0 107 / 0.55);
  --border-strong: oklch(78% 0 107 / 0.7);
  --input: oklch(85.12% 0 107 / 0.55);
  --ring: oklch(52.43% 0.2396 264.41 / 0.4);
  --shadow-surface: 0 0 0 1px oklch(55% 0.002 107 / 0.14), 0 1px 2px oklch(0% 0 0 / 0.04), 0 8px 24px -12px oklch(0% 0 0 / 0.12);
  --shadow-lift: 0 0 0 1px oklch(55% 0.002 107 / 0.16), 0 2px 4px oklch(0% 0 0 / 0.05), 0 24px 48px -20px oklch(0% 0 0 / 0.18);
  --gradient-hero: radial-gradient(120% 90% at 50% -10%, oklch(52.43% 0.2396 264.41 / 0.1) 0%, transparent 62%);
}

* {
  box-sizing: border-box;
  border-color: var(--color-border, var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: oklch(96.99% 0 107 / 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 3.5rem;
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.02em; }
.brand img { width: 1.75rem; height: 1.75rem; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 0.875rem; font-size: 0.875rem; color: var(--muted-foreground); }
.nav-links a { padding: 0.375rem 0.75rem; border-radius: 0.5rem; transition: color .15s, background-color .15s; }
.nav-links a:hover { color: var(--foreground); background: var(--secondary); }
.nav-links a.btn-download { margin-left: 0.5rem; background: var(--surface-raised); color: var(--foreground); font-weight: 500; border: 1px solid var(--border); }
.nav-links a.btn-download:hover { background: var(--secondary); border-color: var(--border-strong); }
.nav-toggle { display: none; margin-left: auto; border: 1px solid var(--border); background: var(--surface-raised); border-radius: 0.5rem; padding: 0.45rem 0.6rem; line-height: 1; }
.nav-toggle svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Buttons (neutral, pi.dev-inspired) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--border); transition: background-color .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--surface-raised); color: var(--foreground); }
.btn-primary:hover { background: var(--secondary); border-color: var(--border-strong); }
.btn-secondary { background: transparent; color: var(--foreground); }
.btn-secondary:hover { background: var(--secondary); border-color: var(--border-strong); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background-image: var(--gradient-hero);
}
.grid-lines { position: absolute; inset: 0; opacity: 0.6; pointer-events: none;
  background-image: linear-gradient(to right, oklch(55% 0.002 107 / 0.07) 1px, transparent 1px), linear-gradient(to bottom, oklch(55% 0.002 107 / 0.07) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
}
.hero .container { position: relative; text-align: center; padding-block: 6rem; }
.hero img.sofi { width: 8rem; height: 8rem; margin: 0 auto 2rem; }
.hero .badge { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; border: 1px solid var(--border); background: var(--surface-raised); border-radius: 999px; padding: 0.25rem 0.75rem; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--muted-foreground); }
.hero h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 600; line-height: 1.05; }
.hero .lead { max-width: 36rem; margin: 1.25rem auto 2rem; font-size: 1.0625rem; color: var(--muted-foreground); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.hero-download-title { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); }

/* ---------- Section ---------- */
.section { border-bottom: 1px solid var(--border); }
.section .container { padding-block: 5rem; }
.section-kicker { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; }
.section h2 { font-size: 1.875rem; font-weight: 600; }
.section .section-sub { margin-top: 0.5rem; color: var(--muted-foreground); max-width: 40rem; }

/* ---------- Cards ---------- */
.card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-surface); }
.card:hover { box-shadow: var(--shadow-lift); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.feature-cell { background: var(--background); padding: 2rem; }
.feature-cell + .feature-cell { border-left: 1px solid var(--border); }
.feature-cell .num { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--primary); }
.feature-cell h3 { margin: 0.75rem 0 0.25rem; font-size: 1rem; font-weight: 600; }
.feature-cell p { font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- Why ---------- */
.grid-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.why-cell { background: var(--background); padding: 2rem; }
.why-cell:nth-child(even) { border-left: 1px solid var(--border); }
.why-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
.why-cell h3 { font-size: 1.125rem; font-weight: 500; color: var(--primary); }
.why-cell p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- Install tabs ---------- */
.install-tabs { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.install-tabs .tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.install-tabs .tab { border: 0; border-right: 1px solid var(--border); background: transparent; padding: 0.5rem 1rem; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--muted-foreground); transition: color .15s, background-color .15s; }
.install-tabs .tab:hover { color: var(--foreground); background: var(--secondary); }
.install-tabs .tab.active { background: var(--foreground); color: var(--background); }
.install-tabs .command { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; }
.install-tabs code { flex: 1; overflow-x: auto; white-space: nowrap; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.8125rem; }
.install-tabs code .prompt { color: var(--accent); }
.install-tabs .copy { flex-shrink: 0; border: 1px solid var(--border); background: transparent; border-radius: 0.375rem; padding: 0.375rem; color: var(--muted-foreground); line-height: 0; transition: border-color .15s, color .15s; }
.install-tabs .copy:hover { border-color: var(--accent); color: var(--accent); }
.install-tabs .copy svg { width: 1rem; height: 1rem; }

/* ---------- Download (direct buttons) ---------- */
.download-group { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.download-row { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: var(--background); }
.download-row + .download-row { border-top: 1px solid var(--border); }
.download-row:hover { background: var(--surface); }
.download-label { flex: 0 0 12rem; }
.download-label h3 { font-size: 1.125rem; font-weight: 600; }
.download-label p { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.download-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn .file { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.6875rem; color: var(--muted-foreground); }

/* ---------- Packages ---------- */
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.package-cell { background: var(--background); padding: 1.5rem; }
.package-cell + .package-cell { border-left: 1px solid var(--border); }
.package-cell .name { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.875rem; color: var(--primary); }
.package-cell .desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- News ---------- */
.news-list { margin-top: 2rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.news-item { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: 0; }
.news-item .date { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--muted-foreground); }
.news-item .title { font-size: 0.875rem; }

/* ---------- CTA ---------- */
.cta { background-image: var(--gradient-hero); }
.cta .container { text-align: center; padding-block: 6rem; }
.cta h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; }
.cta p { max-width: 36rem; margin: 1rem auto 2rem; color: var(--muted-foreground); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3.5rem 2rem; }
.footer-grid h3 { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.875rem; font-weight: 600; }
.footer-grid p.blurb { margin-top: 0.75rem; max-width: 20rem; font-size: 0.875rem; color: var(--muted-foreground); }
.footer-col .label { margin-bottom: 0.75rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { font-size: 0.875rem; color: var(--muted-foreground); transition: color .15s; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 1.25rem; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-feature { grid-template-columns: 1fr; }
  .feature-cell + .feature-cell { border-left: 0; border-top: 1px solid var(--border); }
  .grid-why { grid-template-columns: 1fr; }
  .why-cell:nth-child(even) { border-left: 0; }
  .why-cell:nth-child(n+2) { border-top: 1px solid var(--border); }
  .download-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .download-label { flex: 0 0 auto; }
  .package-grid { grid-template-columns: 1fr; }
  .package-cell + .package-cell { border-left: 0; border-top: 1px solid var(--border); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links { position: fixed; inset: 3.5rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0.25rem; background: var(--background); border-bottom: 1px solid var(--border); padding: 1rem; }
  .nav-links.collapsed { display: none; }
  .nav-links a { padding: 0.625rem 0.75rem; }
  .nav-links a.btn-download { margin-left: 0; text-align: center; }
  .nav-toggle { display: inline-flex; }
  .download-btns { flex-direction: column; align-items: stretch; }
  .download-btns .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}