:root {
  --page-bg: #f7faf7;
  --surface: #ffffff;
  --ink: #17372a;
  --muted: #64736b;
  --green: #14583d;
  --green-2: #2f8a5a;
  --mint: #e5f1e8;
  --line: rgba(20, 88, 61, .14);
  --shadow: 0 20px 50px rgba(19, 56, 40, .10);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font: 15px/1.55 var(--body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.product-nav { position: sticky; top: 0; z-index: 10; background: rgba(247,250,247,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.product-nav__inner { width: min(1180px, calc(100% - 48px)); min-height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.product-logo { display: inline-flex; align-items: center; gap: 9px; font: 600 21px var(--display); color: var(--green); }
.product-logo img { width: 38px; height: 38px; object-fit: contain; }
.product-links { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 14px; }
.product-links a:hover { color: var(--green); }
.product-nav__actions { display: flex; align-items: center; gap: 12px; }
.product-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; padding: 11px 18px; font-weight: 700; cursor: pointer; }
.product-button--solid { background: var(--green); color: #fff; }
.product-button--soft { border-color: var(--line); color: var(--green); background: transparent; }
.product-button--solid:hover { background: #0d452e; }
.product-button--soft:hover { background: var(--mint); }
.product-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 96px; }
.product-kicker { color: var(--green-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.product-intro { display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: end; margin-bottom: 44px; }
.product-intro h1 { margin: 12px 0 16px; max-width: 670px; font: 500 clamp(42px, 6vw, 72px)/1.02 var(--display); letter-spacing: -.035em; color: var(--green); }
.product-intro p { max-width: 470px; margin: 0; color: var(--muted); font-size: 17px; }
.product-note { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.product-note strong { display: block; margin-bottom: 5px; color: var(--green); }
.product-note span { color: var(--muted); font-size: 13px; }
.app-frame { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 30px; background: #edf5ef; box-shadow: var(--shadow); }
.app-panel { min-width: 0; padding: 28px; border-radius: 22px; background: var(--surface); }
.app-panel--green { background: var(--green); color: #fff; }
.app-panel__top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 24px; }
.app-panel__top h2 { margin: 0; font: 500 28px var(--display); color: inherit; }
.avatar-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--mint); object-fit: cover; }
.app-panel--green .avatar-row { color: rgba(255,255,255,.72); }
.feed-card { padding: 18px 0; border-top: 1px solid var(--line); }
.feed-card:first-of-type { border-top: 0; padding-top: 0; }
.feed-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feed-card__meta strong { font-size: 14px; }
.feed-card__meta span { color: var(--muted); font-size: 12px; }
.feed-card h3 { margin: 0 0 6px; font-size: 18px; color: var(--green); }
.feed-card p { margin: 0; color: var(--muted); }
.feed-card__image { width: 100%; max-height: 210px; margin-top: 14px; border-radius: 16px; object-fit: cover; object-position: top; }
.feed-card__actions { display: flex; gap: 18px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.feed-side h3 { margin: 0 0 18px; font: 500 22px var(--display); color: var(--green); }
.feed-side--green h3 { color: #fff; }
.signal { margin: 14px 0 22px; }
.signal__row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.signal__row span { color: var(--muted); }
.signal__bar { height: 9px; border-radius: 999px; background: #dbe9df; overflow: hidden; }
.signal__bar i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }
.app-panel--green .signal__row span { color: rgba(255,255,255,.72); }
.app-panel--green .signal__bar { background: rgba(255,255,255,.18); }
.event-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.event-tabs { display: flex; gap: 8px; }
.event-tab { border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: transparent; color: var(--muted); cursor: pointer; }
.event-tab.is-active, .event-tab:hover { background: var(--green); border-color: var(--green); color: #fff; }
.event-list { display: grid; gap: 14px; }
.event-card { display: grid; grid-template-columns: 116px 1fr auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.event-card:hover { transform: translateY(-2px); border-color: rgba(20,88,61,.34); box-shadow: var(--shadow); }
.event-date { min-height: 105px; display: grid; place-items: center; align-content: center; border-radius: 16px; background: var(--mint); color: var(--green); text-align: center; }
.event-date strong { font-size: 30px; line-height: 1; }
.event-date span { margin-top: 5px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.event-card h3 { margin: 0 0 5px; font: 600 21px var(--display); color: var(--green); }
.event-card p { margin: 0; color: var(--muted); }
.event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.event-meta span { padding: 5px 9px; border-radius: 999px; background: #f1f5f2; }
.event-card .product-button { white-space: nowrap; }
.product-footer { border-top: 1px solid var(--line); padding: 24px 0 36px; color: var(--muted); }
.product-footer__inner { width: min(1180px, calc(100% - 48px)); margin: auto; display: flex; justify-content: space-between; gap: 18px; }
.product-intro { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.product-intro h1 { max-width: none; }
.product-intro p { max-width: 780px; }
.product-intro .product-note { width: 100%; max-width: none; }
.surface-boundary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 28px; align-items: center; margin: 0 0 22px; padding: 24px; border: 1px solid rgba(171, 241, 194, .22); border-radius: 24px; background: linear-gradient(135deg, rgba(20, 88, 61, .42), rgba(7, 18, 14, .76)); }
.surface-boundary h2 { max-width: 650px; margin: 10px 0 8px; font: 500 clamp(28px, 4vw, 44px)/1.04 var(--display); color: #eef8f0; }
.surface-boundary p { max-width: 650px; margin: 0; color: rgba(238, 248, 240, .68); }
.surface-boundary__list { display: grid; gap: 9px; padding: 18px; border: 1px solid rgba(171, 241, 194, .18); border-radius: 18px; background: rgba(7, 18, 14, .38); color: rgba(238, 248, 240, .76); font-size: 13px; }
.surface-boundary__list strong { color: #bdf8cb; font-size: 14px; }
.surface-boundary__list span { display: flex; gap: 9px; align-items: flex-start; }
.surface-boundary__list span::before { content: 'Read'; flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; background: rgba(189, 248, 203, .12); color: #bdf8cb; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.surface-boundary__list small { margin-top: 4px; color: rgba(238, 248, 240, .5); }
.private-gate {
  margin: 0 0 22px;
  padding: 20px 24px;
  border: 1px solid rgba(32, 75, 56, 0.16);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18,36,27,.04), 0 12px 32px rgba(18,36,27,.07);
}
.private-gate__top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.private-gate h2 {
  margin: 8px 0 8px;
  font: 500 clamp(28px, 4vw, 40px)/1.04 var(--display);
  color: #204B38;
}
.private-gate p {
  margin: 0;
  color: #5C6B63;
  max-width: 720px;
}
.private-gate__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 821px) {
  .product-intro .product-note { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .product-intro .product-note strong { margin: 0; white-space: nowrap; }
}
@media (max-width: 820px) {
  .product-links, .product-nav__actions .product-button--soft { display: none; }
  .product-main { padding-top: 44px; }
  .product-intro { grid-template-columns: 1fr; gap: 22px; }
  .app-frame { grid-template-columns: 1fr; }
  .app-panel--green { display: none; }
  .surface-boundary { grid-template-columns: 1fr; gap: 18px; }
  .event-card { grid-template-columns: 82px 1fr; }
  .event-card > .product-button { grid-column: 2; justify-self: start; }
  .event-date { min-height: 88px; }
  .event-date strong { font-size: 24px; }
  .private-gate__top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .product-nav__inner, .product-main, .product-footer__inner { width: min(100% - 32px, 1180px); }
  .product-logo { font-size: 19px; }
  .product-intro h1 { font-size: 46px; }
  .app-panel { padding: 20px; }
  .event-card { gap: 12px; padding: 14px; }
  .event-card h3 { font-size: 18px; }
  .product-footer__inner { flex-direction: column; }
}

/* ---------- WeKamp product surfaces ---------- */
body {
  background:
    radial-gradient(circle at 12% 4%, rgba(107, 230, 156, .15), transparent 26rem),
    radial-gradient(circle at 88% 20%, rgba(36, 111, 89, .22), transparent 31rem),
    #07120e;
  color: #eef8f0;
}
.product-nav { background: rgba(7, 18, 14, .78); border-bottom-color: rgba(171, 241, 194, .16); }
.product-logo, .product-links a:hover { color: #aaf2bf; }
.product-links { color: rgba(238, 248, 240, .62); }
.product-button--soft { color: #bdf8cb; border-color: rgba(171, 241, 194, .22); }
.product-button--soft:hover { color: #07120e; background: #bdf8cb; }
.product-main { padding-top: 60px; }
.product-kicker { color: #83e99e; font-family: 'IBM Plex Mono', monospace; letter-spacing: .16em; }
.product-intro h1 { color: #effff2; text-shadow: 0 0 42px rgba(112, 255, 155, .16); }
.product-intro p, .product-note span, .event-meta, .feed-card p, .signal__row span { color: rgba(238, 248, 240, .64); }
.product-note { border-color: rgba(171, 241, 194, .18); background: rgba(16, 42, 30, .72); box-shadow: 0 20px 70px rgba(0,0,0,.2); }
.product-note strong { color: #bdf8cb; }
.app-frame { position: relative; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); padding: 10px; border: 1px solid rgba(171, 241, 194, .20); border-radius: 34px; background: rgba(9, 30, 21, .82); box-shadow: 0 30px 90px rgba(0,0,0,.34), 0 0 0 1px rgba(146, 255, 177, .04) inset; }
.app-frame::before { content: 'WEKAMP / LIVE SURFACE'; position: absolute; top: -30px; right: 14px; color: rgba(172, 245, 190, .42); font: 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.app-panel { padding: 28px; border: 1px solid rgba(20, 88, 61, .12); background: #f7fbf8; }
.app-panel__top h2 { color: #124c35; }
.avatar-row { color: #668075; }
.feed-card h3, .feed-side h3, .event-card h3 { color: #125239; }
.feed-card { border-top-color: rgba(20, 88, 61, .13); }
.feed-card__meta span, .feed-card__actions { color: #668075; }
.feed-card__image { max-height: 270px; object-position: top center; }
.app-panel--green { background: linear-gradient(145deg, #0d5139 0%, #092d21 100%); border-color: rgba(171, 241, 194, .22); }
.app-panel--green h3 { color: #effff2; }
.app-panel--green .signal__row span { color: rgba(235, 255, 241, .66); }
.app-panel--green .signal__bar { background: rgba(210, 255, 221, .16); }
.signal__bar i { background: #80e79e; box-shadow: 0 0 12px rgba(128, 231, 158, .44); }
.event-toolbar { padding: 18px 20px; border: 1px solid rgba(171, 241, 194, .16); border-radius: 22px; background: rgba(16, 42, 30, .7); }
.event-toolbar strong { color: #effff2 !important; }
.event-toolbar div div { color: rgba(238, 248, 240, .62) !important; }
.event-tab { color: rgba(238, 248, 240, .62); border-color: rgba(171, 241, 194, .18); }
.event-tab.is-active, .event-tab:hover { background: #bdf8cb; border-color: #bdf8cb; color: #092d21; }
.event-list { position: relative; padding-left: 24px; }
.event-list::before { content: ''; position: absolute; left: 7px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(#83e99e, rgba(131,233,158,0)); }
.event-card { grid-template-columns: 102px 1fr auto; position: relative; border-color: rgba(171, 241, 194, .16); background: rgba(14, 40, 28, .82); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.event-card::before { content: ''; position: absolute; left: -22px; width: 9px; height: 9px; border: 2px solid #83e99e; border-radius: 50%; background: #07120e; box-shadow: 0 0 16px rgba(131,233,158,.7); }
.event-card:hover { border-color: rgba(131, 233, 158, .48); background: rgba(20, 61, 42, .9); box-shadow: 0 22px 60px rgba(0,0,0,.3), 0 0 28px rgba(90, 225, 135, .08); }
.event-date { background: rgba(131, 233, 158, .12); color: #bdf8cb; border: 1px solid rgba(131, 233, 158, .18); }
.event-card h3 { color: #effff2; }
.event-card p { color: rgba(238, 248, 240, .64); }
.event-meta span { color: rgba(207, 247, 216, .75); background: rgba(131, 233, 158, .10); }
.product-footer { border-top-color: rgba(171, 241, 194, .14); }
.product-footer a { color: #bdf8cb; }
@media (max-width: 820px) {
  .product-main { padding-top: 40px; }
  .app-frame { grid-template-columns: 1fr; }
  .app-panel--green { display: block; }
  .app-frame::before { top: -25px; right: 4px; font-size: 9px; }
  .event-list { padding-left: 18px; }
  .event-card::before { left: -16px; }
}

/* Match the index.html palette and use the app's actual navigation patterns. */
body {
  background:
    radial-gradient(circle at 15% 5%, rgba(181,222,193,.58), transparent 30rem),
    repeating-radial-gradient(circle at 75% -10%, transparent 0, transparent 74px, rgba(32,75,56,.035) 75px),
    #FCFAF6;
  color: #16281F;
}
.product-nav { background: rgba(252,250,246,.88); border-bottom-color: rgba(32,75,56,.16); }
.product-logo, .product-links a:hover { color: #204B38; }
.product-links { color: #5C6B63; }
.product-button--soft { color: #204B38; border-color: rgba(32,75,56,.16); }
.product-button--soft:hover { color: #204B38; background: #E4F1E8; }
.product-button--solid { background: #204B38; }
.product-button--solid:hover { background: #1A3E2D; }
.product-main { padding-top: 76px; }
.product-kicker { color: #2F7D4B; font-family: var(--body); letter-spacing: .12em; }
.product-intro h1 { color: #204B38; text-shadow: none; }
.product-intro p, .product-note span, .event-meta, .feed-card p, .signal__row span { color: #5C6B63; }
.product-note { border-color: rgba(32,75,56,.16); background: #FFF; box-shadow: 0 1px 2px rgba(18,36,27,.04), 0 12px 32px rgba(18,36,27,.07); }
.product-note strong { color: #204B38; }
.app-frame { grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr); padding: 14px; border: 1px solid rgba(32,75,56,.16); border-radius: 28px; background: #E4F1E8; box-shadow: 0 1px 2px rgba(18,36,27,.04), 0 20px 44px rgba(18,36,27,.09); }
.app-frame::before { content: 'WEKAMP / HOME'; top: -28px; color: rgba(32,75,56,.52); font: 11px 'IBM Plex Mono', monospace; }
.app-panel { padding: 28px; border: 1px solid rgba(32,75,56,.12); background: #FFF; }
.app-panel__top h2, .feed-card h3, .feed-side h3, .event-card h3 { color: #204B38; }
.avatar-row, .feed-card__meta span, .feed-card__actions { color: #5C6B63; }
.feed-card { border-top-color: rgba(32,75,56,.13); }
.feed-card__image { max-height: 270px; border: 1px solid rgba(32,75,56,.10); }
.app-panel--green { background: linear-gradient(145deg, #2F7D4B 0%, #204B38 100%); border-color: rgba(32,75,56,.22); }
.app-panel--green h3 { color: #FFF; }
.app-panel--green .signal__row span { color: rgba(255,255,255,.72); }
.app-panel--green .signal__bar { background: rgba(255,255,255,.18); }
.signal__bar i { background: #B5DEC1; box-shadow: none; }
.event-toolbar { padding: 18px 20px; border: 1px solid rgba(32,75,56,.16); border-radius: 22px; background: #FFF; }
.event-toolbar strong { color: #204B38 !important; }
.event-toolbar div div { color: #5C6B63 !important; }
.event-tab { color: #5C6B63; border-color: rgba(32,75,56,.16); }
.event-tab.is-active, .event-tab:hover { background: #204B38; border-color: #204B38; color: #FFF; }
.event-list { padding-left: 24px; }
.event-list::before { background: linear-gradient(#2F7D4B, rgba(47,125,75,0)); }
.event-card { border-color: rgba(32,75,56,.16); background: #FFF; box-shadow: 0 1px 2px rgba(18,36,27,.04), 0 12px 32px rgba(18,36,27,.07); }
.event-card::before { border-color: #2F7D4B; background: #FCFAF6; box-shadow: none; }
.event-card:hover { border-color: #2F7D4B; background: #FFF; box-shadow: 0 16px 34px rgba(18,36,27,.10); }
.event-date { background: #E4F1E8; color: #204B38; border-color: rgba(32,75,56,.12); }
.event-card p { color: #5C6B63; }
.event-meta span { color: #2F7D4B; background: #E4F1E8; }
.product-footer { border-top-color: rgba(32,75,56,.16); }
.product-footer a { color: #204B38; }
.app-bottom-nav { display: flex; justify-content: space-around; gap: 8px; margin: 14px auto 0; padding: 13px 10px 10px; max-width: 620px; border: 1px solid rgba(32,75,56,.13); border-radius: 20px; background: #DCE2D8; color: #16281F; }
.app-bottom-nav a { display: grid; justify-items: center; gap: 3px; min-width: 66px; font-size: 11px; font-weight: 700; }
.app-bottom-nav a span { font-size: 20px; line-height: 1; }
.app-bottom-nav a.is-active { color: #204B38; }
.event-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.event-summary { padding: 17px; border: 1px solid rgba(32,75,56,.14); border-radius: 18px; background: rgba(255,255,255,.72); }
.event-summary strong { display: block; color: #204B38; font: 600 26px var(--display); }
.event-summary span { color: #5C6B63; font-size: 12px; }
@media (max-width: 820px) {
  .product-main { padding-top: 48px; }
  .app-frame { grid-template-columns: 1fr; }
  .app-panel--green { display: block; }
  .event-summary-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 520px) {
  .event-summary { padding: 12px; }
  .event-summary strong { font-size: 22px; }
  .app-bottom-nav a { min-width: 54px; }
}