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

:root {
  --olive-50:  oklch(98.8% 0.003 106.5);
  --olive-100: oklch(96.6% 0.005 106.5);
  --olive-200: oklch(93.0% 0.007 106.5);
  --olive-300: oklch(88.0% 0.011 106.6);
  --olive-400: oklch(73.7% 0.021 106.9);
  --olive-500: oklch(58.0% 0.031 107.3);
  --olive-600: oklch(46.6% 0.025 107.3);
  --olive-700: oklch(39.4% 0.023 107.4);
  --olive-800: oklch(28.6% 0.016 107.4);
  --olive-900: oklch(22.8% 0.013 107.4);
  --olive-950: oklch(15.3% 0.006 107.1);
  --font-display: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--olive-100); color: var(--olive-950); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .container { padding: 0 40px; } }

.eyebrow { font-size: 14px; font-weight: 600; color: var(--olive-700); letter-spacing: 0;}
.h-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.02em; color: white; text-wrap: balance; }
.h-section { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--olive-950); text-wrap: pretty; }
.p-body { font-size: 16px; line-height: 1.75; color: var(--olive-700); }
.p-lg { font-size: 18px; line-height: 2; color: var(--olive-700); }

.section { padding: 64px 0; }

/* Buttons — iOS-style squircle via corner-shape + finite radius */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 20px; border-radius: 20px; corner-shape: squircle;
  font-size: 14px; font-weight: 500;
  line-height: 28px; transition: background-color .15s ease;
}
.btn.lg { padding: 10px 24px; font-size: 15px; border-radius: 24px; }
.btn-primary { background: var(--olive-950); color: white; }
.btn-primary:hover { background: var(--olive-800); }
.btn-light { background: white; color: var(--olive-950); }
.btn-light:hover { background: var(--olive-100); }
.btn-soft { background: rgba(0,0,0,.08); color: var(--olive-950); }
.btn-soft:hover { background: rgba(0,0,0,.12); }
.btn-plain { background: transparent; color: var(--olive-950); padding: 8px 12px; }
.btn-plain:hover { background: rgba(0,0,0,.07); }
.btn-plain-light { background: transparent; color: white; padding: 8px 12px; }
.btn-plain-light:hover { background: rgba(255,255,255,.12); }

.link {
  display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500;
  color: var(--olive-950);
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Wallpaper */
.wp { position: relative; overflow: hidden; }
.wp-green  { background: linear-gradient(180deg, #22CE8A, #1A7F72); color: white; }
.wp-blue   { background: linear-gradient(180deg, #637c86, #778599); color: white; }
.wp-brown  { background: linear-gradient(180deg, #8d7359, #765959); color: white; }
.wp-purple { background: linear-gradient(180deg, #7b627d, #8f6976); color: white; }
.wp-indigo { background: linear-gradient(180deg, #5C6BC0, #7986CB); color: white; }
.wp-orange { background: linear-gradient(180deg, #E8854A, #D96B3F); color: white; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.30; mix-blend-mode: overlay; border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'><filter id='n'><feTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/><feComponentTransfer result='g'><feFuncR type='linear' slope='4' intercept='1'/><feFuncG type='linear' slope='4' intercept='1'/><feFuncB type='linear' slope='4' intercept='1'/></feComponentTransfer><feColorMatrix type='saturate' values='0' in='g'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 250px 250px;
}

/* Card */
.card { background: rgba(0,0,0,.025); border-radius: 16px; padding: 8px; }
.card-body { padding: 20px 16px 16px; }

/* Reveal — no-op. Class kept for reference but leaves content visible. */
.reveal, .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { opacity: 1; }

/* Icon */
.icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }