/* One stylesheet for the three pages. The palette is the dashboards' own, so
   the site and the products read as one family, and it follows the system
   colour scheme the same way they do. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-latin-500-normal.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #64748b;
  --accent: #0f766e;
  --accent-bg: #dff3f0;
  --glow-a: rgba(13 148 136 / 0.22);
  --glow-b: rgba(252 211 77 / 0.20);
  --sans: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #121b2c;
    --surface-2: #1a2436;
    --border: #233046;
    --text: #f1f5f9;
    --text-2: #cbd5e1;
    --muted: #94a3b8;
    --accent: #2dd4bf;
    --accent-bg: #10403c;
    --glow-a: rgba(45 212 191 / 0.18);
    --glow-b: rgba(252 211 77 / 0.08);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { position: relative; margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
code, pre { font-family: var(--mono); }

.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--gutter); }

/* two soft lights behind the top of the page, drifting slowly */
.glow { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; overflow: hidden; pointer-events: none; }
.glow::before, .glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); }
.glow::before { width: 720px; height: 520px; left: calc(50% - 620px); top: -160px; background: var(--glow-a); animation: drift 22s ease-in-out infinite alternate; }
.glow::after { width: 560px; height: 420px; left: calc(50% + 40px); top: -120px; background: var(--glow-b); animation: drift 26s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(90px, 60px) scale(1.12); } }

/* header */
.top { display: flex; align-items: center; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.wordmark { color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; text-transform: uppercase; letter-spacing: 0.22em; margin-right: -0.22em; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
/* the product badge, as the apps draw it beside their own wordmark */
.tag { padding: 3px 9px 3px 10px; border-radius: 7px; background: var(--accent-bg); color: var(--accent); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.35; }
.top nav { margin-left: auto; display: flex; gap: 24px; font-size: 14.5px; }
.top nav a { color: var(--text-2); text-decoration: none; transition: color .2s ease; }
.top nav a:hover, .top nav a[aria-current] { color: var(--accent); }

/* hero, centred */
.hero { text-align: center; padding-top: clamp(40px, 9vw, 110px); }
.hero h1 { margin: 0 auto; max-width: 16em; font-weight: 500; font-size: clamp(34px, 5.6vw, 60px); line-height: 1.1; letter-spacing: -0.03em; }
.hero .lede { margin: 20px auto 0; max-width: 34em; font-size: clamp(16px, 1.8vw, 18.5px); color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 500; text-decoration: none; border: 1px solid var(--border); color: var(--text); background: var(--surface); transition: transform .25s var(--ease), border-color .2s ease; }
.btn.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.btn.primary:hover { border-color: var(--text); }

/* the gallery: one screenshot at a time, tabs underneath, each tab's line
   filling while it is shown. Without the script every slide is listed. */
.gallery { margin-top: clamp(40px, 6vw, 64px); }
/* sized so the shot, its caption and the tabs fit one screen together */
.stage { position: relative; display: grid; width: min(100%, 940px, calc((100vh - 230px) * 1.51)); margin: 0 auto; }
.arrow { display: none; }
.js .arrow { display: grid; place-items: center; position: absolute; top: calc(50% - 40px); z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 6px 20px -8px rgba(15 23 42 / 0.3); transition: transform .25s var(--ease), border-color .2s ease; }
.js .arrow:hover { border-color: var(--accent); transform: scale(1.06); }
.js .arrow svg { width: 18px; height: 18px; }
.arrow.prev { left: -68px; }
.arrow.next { right: -68px; }
@media (max-width: 1120px) {
  .arrow.prev { left: 8px; }
  .arrow.next { right: 8px; }
}
.slide { margin: 0 0 40px; }
.slide figcaption { margin: 18px auto 0; max-width: 36em; text-align: center; color: var(--text-2); font-size: 15px; }
.slide figcaption b { display: block; color: var(--text); font-weight: 500; font-size: 17px; }
.shot { display: block; cursor: zoom-in; }
.tabs { display: none; }

.js .slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .6s ease, transform .9s var(--ease), visibility 0s .6s; }
.js .slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .9s var(--ease); }
.js .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; margin-top: 22px; }
.tab { position: relative; padding: 8px 14px 12px; background: none; border: 0; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; transition: color .2s ease; }
.tab:hover, .tab[aria-selected="true"] { color: var(--text); }
.tab::before, .tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; }
.tab::before { background: var(--border); opacity: 0; transition: opacity .2s ease; }
.tab[aria-selected="true"]::before { opacity: 1; }
.tab::after { background: var(--accent); transform-origin: left; transform: scaleX(0); }
.tab[aria-selected="true"]::after { animation: fill 6s linear forwards; }
.gallery.paused .tab::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

/* sections below the gallery */
.section { padding-top: clamp(72px, 10vw, 128px); text-align: center; }
.section h2 { margin: 0; font-weight: 500; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; letter-spacing: -0.02em; }
.section > p { margin: 14px auto 0; max-width: 34em; color: var(--text-2); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; text-align: left; }
.card { padding: 26px 26px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.card h3 { margin: 0; font-weight: 500; font-size: 17px; }
.card p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; }
.cmd { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 12px 12px 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cmd pre { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.7; overflow-x: auto; }
.copy { flex: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.copy:hover { color: var(--text); }

/* index: the two products */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(40px, 6vw, 72px); }
.product { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; transition: transform .4s var(--ease), border-color .2s ease, box-shadow .4s var(--ease); }
.product:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 40px -20px rgba(15 23 42 / 0.35); }
.product picture { display: block; padding: 26px 26px 0; background: var(--surface-2); overflow: hidden; }
.product picture img { transition: transform .6s var(--ease); }
.product:hover picture img { transform: translateY(-6px); }
.product .body { padding: 24px 26px 28px; text-align: center; }
.product .name { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 20px; }
.product .name img { width: 28px; height: 28px; }
.product p { margin: 10px auto 0; max-width: 26em; color: var(--text-2); font-size: 15px; }
.product .more { margin-top: 14px; font-size: 14.5px; font-weight: 500; color: var(--accent); }

footer { margin-top: clamp(80px, 10vw, 128px); border-top: 1px solid var(--border); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 28px; padding-bottom: 36px; font-size: 13.5px; color: var(--muted); }
footer .wordmark { font-size: 12.5px; }
footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--accent); }

/* entrances: the hero rises in on load, later sections as they scroll into view */
.rise { animation: rise .9s var(--ease) both; }
.rise:nth-child(2) { animation-delay: .08s; }
.rise:nth-child(3) { animation-delay: .16s; }
.rise:nth-child(4) { animation-delay: .24s; }
.rise:nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* the zoom */
dialog.zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.zoom::backdrop { background: rgba(2 6 23 / 0.85); }
dialog.zoom img { width: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); margin: auto; position: absolute; inset: 0; cursor: zoom-out; }

@media (max-width: 760px) {
  .cards, .products { grid-template-columns: minmax(0, 1fr); }
  .top nav { gap: 18px; }
  footer nav { margin-left: 0; }
}
/* on a phone the badge needs the room: the link to this page and GitHub are
   both a button away already */
@media (max-width: 480px) {
  .top nav a[aria-current], .top nav a[href^="https://github"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .tab[aria-selected="true"]::after { transform: scaleX(1); }
}