/* Ebb · ebb.serveka.com — low tide at dusk: sand, sunset coral, deep teal. */

:root {
  color-scheme: light;
  --sand: #F7F1E8;
  --paper: #FFFCF7;
  --shell: #EFE6D8;
  --ink: #0F2329;
  --ink-2: #33474D;
  --muted: #66777C;
  --line: rgba(15, 35, 41, .1);
  --teal: #0E5E6F;
  --sea: #13788A;
  --aqua: #2BB3A6;
  --foam: #CDEBE6;
  --coral: #EF7D52;
  --peach: #FBD3B8;
  --gold: #F5B94A;
  --radius: 22px;
  --serif: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 30px 80px -20px rgba(15, 35, 41, .28), 0 8px 24px -8px rgba(15, 35, 41, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--teal); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .9em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
::selection { background: var(--peach); }

/* ---------- Nav ---------- */
nav.top { position: sticky; top: 0; z-index: 40; background: rgba(247, 241, 232, .78); backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid var(--line); }
nav.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; gap: 10px; align-items: center; font-weight: 750; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; }
nav .links { margin-left: auto; display: flex; gap: 24px; align-items: center; font-size: 15px; }
nav .links a { color: var(--ink-2); text-decoration: none; }
nav .links a:hover { color: var(--ink); }
.btn { display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 999px; font-weight: 650; font-size: 14.5px; text-decoration: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink) !important; }
.btn.dark { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.btn .count { color: var(--muted); font-weight: 500; }
.btn.dark .count { color: #A9BCC0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden;
  background:
    radial-gradient(520px 520px at 82% 6%, rgba(245, 185, 74, .35), transparent 60%),
    radial-gradient(900px 500px at 70% 0%, rgba(239, 125, 82, .22), transparent 65%),
    linear-gradient(180deg, #FCEADB 0%, var(--sand) 52%, #E6F2EE 100%);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: center; padding-top: 64px; padding-bottom: 150px; }
.tag { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 650; color: var(--teal); background: rgba(255,255,255,.65); border: 1px solid rgba(14,94,111,.15); padding: 6px 12px 6px 8px; border-radius: 999px; }
.tag b { background: var(--teal); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; line-height: 1.02; font-size: clamp(44px, 5.6vw, 76px); margin: 22px 0 20px; }
h1 em { font-style: italic; color: var(--teal); }
.hero .lead { font-size: 20px; color: var(--ink-2); margin: 0 0 28px; max-width: 32em; }
.hero .lead b { color: var(--ink); }
.install { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 6px 6px 6px 18px; border-radius: 14px; background: var(--ink); box-shadow: var(--shadow); }
.install code { flex: 1; color: #EAF6F4; font-size: 14.5px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.install code::-webkit-scrollbar { display: none; }
.install .p { color: var(--aqua); user-select: none; }
.copy { border: 0; cursor: pointer; padding: 11px 16px; border-radius: 10px; font: 650 14px/1 var(--sans); background: var(--coral); color: #fff; transition: transform .15s, background .2s; }
.copy:hover { transform: translateY(-1px); }
.copy.done { background: var(--aqua); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); }
.checks li::before { content: "✓"; color: var(--aqua); font-weight: 800; margin-right: 7px; }

/* The receding tide along the bottom of the hero. */
.tide { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; pointer-events: none; }
.tide svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.tide .a { animation: drift 26s linear infinite, ebb 10s ease-in-out infinite; }
.tide .b { animation: drift 38s linear infinite reverse, ebb 13s ease-in-out infinite; }
.tide .c { animation: drift 52s linear infinite, ebb 16s ease-in-out infinite; }
@keyframes drift { to { transform: translateX(-50%); } }
@keyframes ebb { 50% { bottom: -24px; } }

/* ---------- The Mac: menu bar, notification, panel ---------- */
.mac { position: relative; border-radius: 18px; overflow: hidden; height: 500px; box-shadow: var(--shadow);
  background:
    radial-gradient(60% 50% at 75% 30%, rgba(251, 211, 184, .85), transparent 70%),
    linear-gradient(180deg, #F3B48F 0%, #E9A07E 26%, #7FB9B8 62%, #1E6E7C 100%);
}
.mac::after { /* a quiet sea horizon in the wallpaper */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px);
}
.menubar { position: absolute; inset: 0 0 auto 0; height: 28px; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: rgba(255, 255, 255, .42); backdrop-filter: blur(20px) saturate(1.6); font-size: 12.5px; color: #1d1d1f; }
.menubar .apple { font-size: 14px; }
.menubar b { font-weight: 700; }
.menubar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.menubar .icon { width: 14px; height: 10px; border: 1.5px solid #1d1d1f; border-radius: 3px; opacity: .7; }
.ebb-item { display: inline-flex; gap: 6px; align-items: center; padding: 2px 8px; border-radius: 6px; font-weight: 650; font-variant-numeric: tabular-nums; transition: background .2s; }
.ebb-item.on { background: rgba(0, 0, 0, .14); }
.ebb-item svg { width: 15px; height: 12px; }

.notice { position: absolute; z-index: 4; top: 40px; right: 12px; width: min(340px, 80%); padding: 12px 14px; border-radius: 16px; display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  background: rgba(246, 246, 246, .86); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 12px 40px rgba(0,0,0,.18); font-size: 12.5px; color: #1d1d1f;
  transform: translateX(115%); transition: transform .7s cubic-bezier(.2, .9, .25, 1); }
.notice.show { transform: none; }
.notice img { width: 34px; height: 34px; }
.notice .t { display: flex; justify-content: space-between; color: #6e6e73; font-size: 11.5px; }
.notice .t b { color: #1d1d1f; }
.notice .h { font-weight: 700; margin: 1px 0; }
.notice .press { position: absolute; inset: 0; border-radius: inherit; background: rgba(0,0,0,.06); opacity: 0; transition: opacity .15s; }
.notice.pressed .press { opacity: 1; }

.panel { position: absolute; z-index: 4; top: 34px; right: 64px; width: min(350px, 76%); border-radius: 14px; overflow: hidden;
  background: rgba(250, 250, 250, .94); backdrop-filter: blur(24px); box-shadow: 0 18px 50px rgba(0,0,0,.22); color: #1d1d1f; font-size: 12px;
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.25,1); pointer-events: none; }
.panel.show { opacity: 1; transform: none; }
.panel .ph { padding: 12px 14px 10px; }
.panel .row1 { display: flex; justify-content: space-between; color: #6e6e73; font-size: 11px; }
.panel .row1 b { color: #1d1d1f; }
.panel .big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.panel .big small { font-size: 12px; font-weight: 500; color: #6e6e73; letter-spacing: 0; }
.panel .bar { display: flex; gap: 2px; height: 5px; border-radius: 99px; overflow: hidden; }
.panel .bar i { display: block; height: 100%; transition: flex-grow .8s ease; }
.panel .items { border-top: 1px solid rgba(0,0,0,.06); }
.panel .it { display: grid; grid-template-columns: 8px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 14px; transition: opacity .4s, transform .6s cubic-bezier(.6,0,.3,1); }
.panel .it i { width: 7px; height: 7px; border-radius: 2px; }
.panel .it span small { display: block; color: #6e6e73; font-size: 10.5px; }
.panel .it em { font-style: normal; font-size: 10px; font-weight: 650; color: var(--teal); background: #E1F0F2; padding: 2px 6px; border-radius: 99px; }
.panel .it b { font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.panel .it.gone { opacity: 0; transform: translateX(40%); }
.panel .safe { display: flex; gap: 6px; padding: 8px 14px; background: rgba(0,0,0,.035); color: #3a3a3c; font-size: 11px; }
.panel .acts { display: flex; gap: 8px; padding: 10px 14px 12px; }
.panel .acts span { padding: 7px 12px; border-radius: 8px; background: rgba(0,0,0,.07); font-weight: 600; }
.panel .acts .go { flex: 1; text-align: center; background: var(--teal); color: #fff; transition: transform .12s, filter .2s; }
.panel .acts .go.pressed { transform: scale(.97); filter: brightness(1.15); }
.panel .done { display: none; padding: 16px 14px 18px; text-align: center; }
.panel.cleaned .items, .panel.cleaned .safe, .panel.cleaned .acts { display: none; }
.panel.cleaned .done { display: block; }
.panel .done b { display: block; font-size: 14px; margin-bottom: 2px; }
.panel .done span { color: #6e6e73; }

.cursor { position: absolute; z-index: 6; width: 18px; height: 18px; left: 40%; top: 70%; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1); pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.caption { position: absolute; z-index: 5; left: 14px; bottom: 14px; max-width: calc(100% - 28px); display: flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 999px;
  background: rgba(15, 35, 41, .72); color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(10px); }
.caption i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); font-style: normal; font-size: 11px; }

/* ---------- Sections ---------- */
section { padding: 110px 0; }
.kicker { font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(34px, 4.2vw, 54px); margin: 0 0 16px; max-width: 20ch; text-wrap: balance; }
h2 em { font-style: italic; color: var(--teal); }
.sub { color: var(--ink-2); font-size: 19px; max-width: 38em; margin: 0 0 48px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* What it is, in one line each. */
.oneliner { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.oneliner .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.oneliner div { font-size: 15px; color: var(--ink-2); }
.oneliner b { display: block; font-family: var(--serif); font-size: 30px; color: var(--ink); font-weight: 600; letter-spacing: -.02em; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.step .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 750; margin-bottom: 18px; }
.step h3 { margin: 0 0 8px; font-size: 21px; }
.step p { margin: 0; color: var(--ink-2); }
.step .quote { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--sand); font-size: 14px; color: var(--ink); border: 1px solid var(--line); }

/* Where you use it */
.where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.surface { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.surface .art { height: 210px; position: relative; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #F6C3A3, #8CC3C0 70%, #2C7F8C); }
.surface .art.term { background: #0F2329; place-items: stretch; }
.surface .body { padding: 22px 24px 26px; }
.surface h3 { margin: 0 0 6px; font-size: 20px; }
.surface p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.mini-bar { position: absolute; top: 0; left: 0; right: 0; height: 26px; background: rgba(255,255,255,.45); backdrop-filter: blur(10px); display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 0 12px; font-size: 12px; font-weight: 650; color: #1d1d1f; }
.mini-bar .ebb-item { background: rgba(0,0,0,.12); }
.mini-pop { width: 78%; margin-top: 26px; border-radius: 12px; background: rgba(250,250,250,.94); box-shadow: 0 14px 40px rgba(0,0,0,.2); padding: 12px 14px; font-size: 12px; color: #1d1d1f; }
.mini-pop .big { font-size: 22px; font-weight: 800; }
.mini-pop .go { margin-top: 10px; background: var(--teal); color: #fff; text-align: center; border-radius: 8px; padding: 7px; font-weight: 650; }
.mini-note { width: 84%; border-radius: 14px; padding: 12px; background: rgba(246,246,246,.9); box-shadow: 0 14px 40px rgba(0,0,0,.2); display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 12px; color: #1d1d1f; animation: float 5s ease-in-out infinite; }
.mini-note img { width: 30px; }
@keyframes float { 50% { transform: translateY(-6px); } }
.mini-term { font: 12.5px/1.75 var(--mono); color: #CFE6E3; padding: 18px 20px; white-space: pre; }
.mini-term .g { color: var(--aqua); font-weight: 700; } .mini-term .d { color: #6F8D93; }

/* Features: what, how, where, your way */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.feature .label { display: inline-block; font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.l-what { background: #FDE6DA; color: #B3532D; } .l-how { background: #DDF0EC; color: var(--teal); }
.l-where { background: #FBEFD3; color: #9A6A12; } .l-yours { background: #E7E4F6; color: #4B4290; }
.feature h3 { margin: 0 0 16px; font-size: 22px; }
.feature ul { list-style: none; margin: 0; padding: 0; }
.feature li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
.feature li span { color: var(--muted); font-size: 14px; text-align: right; }
.feature li code { color: var(--ink); }
.pill { font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pill.y { background: #DDF0EC; color: var(--teal); } .pill.r { background: #EEE9E0; color: #6B5F4D; } .pill.n { background: #FDE6DA; color: #B3532D; }

/* Never touch */
.shore { background: var(--ink); color: #EAF3F2; position: relative; overflow: hidden; }
.shore h2 { color: #fff; } .shore h2 em { color: var(--peach); }
.shore .sub { color: #A9BFC2; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { font: 600 14px/1 var(--mono); padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.chips span::before { content: "⛨ "; color: var(--peach); }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; margin-top: 56px; }
.promises h3 { margin: 0 0 4px; font-size: 17.5px; color: #fff; }
.promises p { margin: 0; color: #A9BFC2; font-size: 15px; }

/* Numbers */
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.big-figure { font-family: var(--serif); font-size: clamp(84px, 11vw, 150px); line-height: .9; letter-spacing: -.03em; font-weight: 600; color: var(--teal); }
.big-figure small { font-size: .35em; color: var(--coral); }
.bars div { display: grid; grid-template-columns: 150px 1fr 76px; gap: 14px; align-items: center; padding: 9px 0; }
.bars .l { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.bars .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bars .t { height: 10px; border-radius: 99px; background: var(--shell); overflow: hidden; }
.bars .f { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--aqua)); transition: width 1.5s cubic-bezier(.2,.7,.2,1); }
.fine { color: var(--muted); font-size: 14px; }

/* FAQ */
details { border-top: 1px solid var(--line); padding: 20px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-weight: 650; font-size: 18.5px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--coral); font-size: 24px; line-height: 1; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-2); margin: 12px 0 0; max-width: 48em; }

/* CTA + footer */
.cta { text-align: center; position: relative; overflow: hidden; padding: 120px 0 170px;
  background: radial-gradient(500px 300px at 50% 0%, rgba(245,185,74,.3), transparent 70%), linear-gradient(180deg, #FCEADB, var(--sand)); }
.cta h2 { margin: 0 auto 14px; }
.cta .install { margin: 30px auto 0; text-align: left; }
footer { background: var(--paper); border-top: 1px solid var(--line); padding: 34px 0 44px; font-size: 14.5px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
footer .sp { flex: 1; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .mz { font-weight: 650; color: var(--teal); }

@media (max-width: 980px) {
  .hero .wrap, .numbers { grid-template-columns: 1fr; }
  .steps, .where, .promises { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr; }
  .oneliner .wrap { grid-template-columns: 1fr 1fr; }
  nav .links a:not(.btn) { display: none; }
}
@media (max-width: 640px) {
  .steps, .where, .promises, .oneliner .wrap { grid-template-columns: 1fr; }
  section { padding: 84px 0; }
  .bars div { grid-template-columns: 110px 1fr 66px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}