/* pip.bang.co.tz. One stylesheet, no frameworks, no web fonts, no trackers.
   Layout: a 980 px reading column and a 1120 px content column, generous vertical rhythm, one idea per section. */
:root {
  --pip: #7c5cff; --pip-2: #b2a3ff;
  --bg: #000; --tile: #101013; --tile-2: #16161a; --line: rgba(255, 255, 255, .08);
  --text: #f5f5f7; --soft: #a1a1a6; --mute: #6e6e73;
  --sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --disp: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.28, .11, .32, 1);
  --col: 1120px; --read: 980px; --gut: 22px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font: 17px/1.47 var(--sans); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--disp); font-weight: 700; color: var(--text); }
p { margin: 0; }
section { padding-inline: var(--gut); }

/* light theme (theme.js sets data-theme on <html>) */
:root[data-theme="light"] { --bg: #fff; --tile: #f5f5f7; --tile-2: #ececf0; --line: rgba(0, 0, 0, .08); --text: #1d1d1f; --soft: #515154; --mute: #86868b; --pip-2: #6a4dff; }
:root[data-theme="light"] .nav { background: rgba(255, 255, 255, .72); }
:root[data-theme="light"] .nav nav { color: rgba(0, 0, 0, .8); } :root[data-theme="light"] .nav nav a:hover { color: #000; }
:root[data-theme="light"] .pill-btn, :root[data-theme="light"] .btn { background: #1d1d1f; color: #fff; }
:root[data-theme="light"] .pill-btn:hover, :root[data-theme="light"] .btn:hover { background: #3a3a3c; }
:root[data-theme="light"] .grad { background-image: linear-gradient(90deg, #1d1d1f 0%, #6a4dff 55%, #8f74ff 100%); }
:root[data-theme="light"] .desk { background: linear-gradient(#e8e8ed, #d2d2d7); box-shadow: 0 60px 120px -40px rgba(124, 92, 255, .3), 0 30px 60px -30px rgba(0, 0, 0, .25); }
:root[data-theme="light"] .tile > img, :root[data-theme="light"] .tile.wide > img { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); }
:root[data-theme="light"] .tile-pill { background: radial-gradient(80% 90% at 50% 0%, rgba(124, 92, 255, .18), transparent 70%); }
:root[data-theme="light"] .privacy { background: radial-gradient(70% 80% at 50% 0%, rgba(124, 92, 255, .14), transparent 70%), var(--tile); }
:root[data-theme="light"] .trio div, :root[data-theme="light"] details, :root[data-theme="light"] details:first-of-type { border-color: rgba(0, 0, 0, .12); }
:root[data-theme="light"] .start li span { background: #1d1d1f; color: #fff; }
:root[data-theme="light"] .foot { background: #f5f5f7; }
:root[data-theme="light"] .video-frame { background: #e8e8ed; }
html { transition: background-color .3s; }

/* the sun/moon switch in the top bar */
.theme { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -10px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background .2s; }
.theme:hover { background: var(--line); } .theme:focus-visible { outline: 2px solid var(--pip-2); outline-offset: 2px; }
.theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .i-sun { display: none; } :root[data-theme="light"] .theme .i-sun { display: block; } :root[data-theme="light"] .theme .i-moon { display: none; }
@media (max-width: 734px) { .theme { margin-left: auto; margin-right: 8px; } }

/* Pip, drawn in CSS */
.pip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; width: 24px; height: 21px; border-radius: 7.5px; background: var(--pip); }
.pip i { width: 4px; height: 7px; border-radius: 2px; background: #fff; transform-origin: 50% 55%; animation: blink 5.2s infinite; }
.pip.big { width: 64px; height: 57px; border-radius: 20px; gap: 11px; } .pip.big i { width: 10px; height: 18px; border-radius: 5px; }
.pip.huge { width: 96px; height: 86px; border-radius: 30px; gap: 16px; box-shadow: 0 30px 90px -20px rgba(124, 92, 255, .7); } .pip.huge i { width: 15px; height: 27px; border-radius: 8px; }
/* Pip blinks like a living thing: open for a while, a quick blink, later a double blink; every Pip on its own timing */
@keyframes blink { 0%, 40%, 43.5%, 86%, 88.5%, 91%, 93.5%, 100% { transform: scaleY(1); } 41.8% { transform: scaleY(.08); } 87.2% { transform: scaleY(.08); } 92.2% { transform: scaleY(.08); } }
@keyframes blink-now { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
.pip:hover i { animation: blink-now .32s ease 2; }
.hero .pip i, .eyebrow + .pip i { animation-delay: .6s; } .privacy .pip i { animation-delay: 1.9s; animation-duration: 6.1s; } .final .pip i { animation-delay: 3.1s; animation-duration: 4.7s; } .foot .pip i { animation-delay: 2.4s; animation-duration: 5.8s; }

/* navigation: thin, translucent, always there */
.nav { position: sticky; top: 0; z-index: 50; height: 52px; background: rgba(0, 0, 0, .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav-in { max-width: var(--read); height: 100%; margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 600 17px var(--disp); }
.nav nav { display: flex; gap: 26px; margin-left: auto; font-size: 13px; color: rgba(255, 255, 255, .8); letter-spacing: -.01em; }
.nav nav a { transition: color .2s; } .nav nav a:hover { color: #fff; }
.pill-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; background: #fff; color: #000; font-size: 13px; font-weight: 600; letter-spacing: -.01em; transition: background .2s; }
.pill-btn:hover { background: #e8e8ed; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 980px; background: #fff; color: #000; font-size: 17px; font-weight: 600; transition: background .2s, transform .2s var(--ease); }
.btn:hover { background: #e8e8ed; } .btn:active { transform: scale(.98); }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--pip-2); font-size: 17px; } .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link span { font-size: 22px; line-height: 1; transform: translateY(-1px); }
:is(.btn, .pill-btn, .link, summary, .nav a):focus-visible { outline: 2px solid var(--pip-2); outline-offset: 3px; border-radius: 8px; }

/* hero */
.hero { padding-top: 48px; text-align: center; }
.eyebrow { font-size: 17px; font-weight: 600; color: var(--pip-2); margin-bottom: 14px; }
h1 { font-size: clamp(44px, 8vw, 96px); line-height: 1.04; letter-spacing: -.045em; font-weight: 700; }
.grad { background: linear-gradient(90deg, #f5f5f7 0%, #c9bfff 45%, #8f74ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { max-width: 680px; margin: 22px auto 0; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.38; color: var(--soft); letter-spacing: -.02em; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; margin-top: 34px; }

/* the desk: a stylised screen with the island hanging from its top edge */
.desk { max-width: var(--col); margin: 72px auto 0; padding: 14px; border-radius: 34px; background: linear-gradient(#1c1c22, #0c0c0f); border: 1px solid var(--line); box-shadow: 0 60px 120px -40px rgba(124, 92, 255, .35), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.desk-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: radial-gradient(60% 70% at 18% 82%, #ff7a3d 0%, rgba(255, 122, 61, 0) 60%), radial-gradient(55% 65% at 85% 78%, #6a4dff 0%, rgba(106, 77, 255, 0) 62%),
    radial-gradient(70% 60% at 55% 120%, #ff3d77 0%, rgba(255, 61, 119, 0) 60%), linear-gradient(180deg, #120d24 0%, #241a3d 55%, #3a1f3a 100%); }
.desk-island { position: absolute; top: 0; left: 50%; width: 56%; transform: translateX(-50%); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.caption { margin-top: 20px; font-size: 14px; color: var(--mute); }

/* one big statement */
.statement { max-width: var(--read); margin: 0 auto; padding-block: 150px 70px; text-align: center; }
.statement h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.08; letter-spacing: -.035em; }

/* bento: tiles of different widths, each one feature with its screenshot */
.bento { max-width: var(--col); margin: 0 auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: var(--tile); border: 1px solid var(--line); }
.tile.wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.tile-text { padding: 40px 40px 26px; }
.tile.wide .tile-text { padding: 48px; }
.tag { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--pip-2); letter-spacing: -.01em; }
.tile h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.03em; }
.tile p:not(.tag) { margin-top: 12px; font-size: 17px; color: var(--soft); }
.tile > img { width: calc(100% - 40px); margin: auto 20px 20px; border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9); }
.tile.wide > img { width: calc(100% - 28px); margin: 28px 28px 28px 0; }
.tile-pill { flex: 1; display: grid; place-items: center; padding: 26px 22px 44px; background: radial-gradient(80% 90% at 50% 0%, rgba(124, 92, 255, .28), transparent 70%); }
.tile-pill img { width: 100%; max-width: 440px; }
.tile.warm { background: radial-gradient(70% 100% at 85% 100%, rgba(255, 122, 61, .2), transparent 70%), var(--tile); }
.tile.cool { background: radial-gradient(90% 90% at 50% 110%, rgba(20, 184, 166, .16), transparent 70%), var(--tile); }
.tile.red { background: radial-gradient(90% 90% at 50% 110%, rgba(214, 48, 63, .18), transparent 70%), var(--tile); }

/* small things */
.smalls { max-width: var(--col); margin: 0 auto; padding-block: 140px 40px; }
.smalls h2, .start h2, .faq h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -.035em; text-align: center; }
.small-grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.small-grid li { display: flex; flex-direction: column; gap: 6px; }
.small-grid svg { width: 30px; height: 30px; margin-bottom: 8px; fill: none; stroke: var(--pip-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.small-grid b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .small-grid span { color: var(--soft); font-size: 16px; }

/* privacy */
.privacy { max-width: var(--col); margin: 120px auto 0; padding: 90px 40px; border-radius: 36px; text-align: center; background: radial-gradient(70% 80% at 50% 0%, rgba(124, 92, 255, .22), transparent 70%), var(--tile); border: 1px solid var(--line); }
.privacy .pip { margin-bottom: 26px; }
.privacy h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.04em; }
.trio { max-width: 900px; margin: 56px auto 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; }
.trio div { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); } .trio b { display: block; font-size: 19px; margin-bottom: 6px; } .trio span { color: var(--soft); font-size: 16px; }

/* start */
.start { max-width: var(--col); margin: 0 auto; padding-block: 140px 0; }
.start ol { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.start li { padding: 32px; border-radius: 26px; background: var(--tile); border: 1px solid var(--line); }
.start li span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; font-weight: 700; font-size: 15px; }
.start li b { display: block; margin: 18px 0 6px; font-size: 21px; letter-spacing: -.02em; } .start li p { color: var(--soft); }

/* questions */
.faq { max-width: 820px; margin: 0 auto; padding-block: 140px 0; }
.faq h2 { margin-bottom: 40px; }
details { border-bottom: 1px solid rgba(255, 255, 255, .14); } details:first-of-type { border-top: 1px solid rgba(255, 255, 255, .14); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-right: 6px; border-right: 2px solid var(--soft); border-bottom: 2px solid var(--soft); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
details p { padding: 0 4px 26px; color: var(--soft); font-size: 17px; max-width: 680px; }

/* final */
.final { padding-block: 170px 150px; text-align: center; }
.final h2 { margin-top: 34px; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; letter-spacing: -.045em; }
.final .ctas { margin-top: 36px; } .fine { margin-top: 18px; font-size: 14px; color: var(--mute); }

/* footer */
.foot { border-top: 1px solid var(--line); background: #0b0b0d; }
.foot-in { max-width: var(--read); margin: 0 auto; padding: 26px var(--gut) 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; font-size: 13px; color: var(--mute); }
.brand.small { font-size: 15px; color: var(--soft); }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; } .foot nav a { color: var(--soft); } .foot nav a:hover { color: #fff; }
.copy { margin-left: auto; }

/* scroll reveal: only when scripts run, and never for people who prefer less motion */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .pip i { animation: none; } }

/* tablet */
@media (max-width: 1068px) {
  .tile.wide { grid-template-columns: 1fr; } .tile.wide .tile-text { padding: 40px 40px 0; } .tile.wide > img { width: calc(100% - 40px); margin: 26px 20px 20px; }
  .small-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phone */
@media (max-width: 734px) {
  :root { --gut: 18px; } html { font-size: 16px; }
  .nav nav { display: none; } .nav-in { justify-content: space-between; }
  .hero { padding-top: 32px; } .desk { margin-top: 48px; padding: 8px; border-radius: 22px; } .desk-screen { border-radius: 15px; aspect-ratio: 4 / 3; } .desk-island { width: 92%; }
  .statement { padding-block: 100px 50px; }
  .bento { grid-template-columns: 1fr; gap: 14px; } .tile.wide { grid-column: auto; }
  .tile-text, .tile.wide .tile-text { padding: 30px 26px 0; } .tile > img, .tile.wide > img { width: calc(100% - 24px); margin: 22px 12px 12px; border-radius: 13px; }
  .tile-pill { padding: 26px 14px 34px; }
  .smalls, .start, .faq { padding-block-start: 100px; } .small-grid { grid-template-columns: 1fr; gap: 30px; }
  .privacy { margin-top: 90px; padding: 64px 22px; border-radius: 26px; } .trio { grid-template-columns: 1fr; margin: 40px 0 34px; }
  .start ol { grid-template-columns: 1fr; } .final { padding-block: 120px 100px; }
  summary { font-size: 18px; padding: 20px 2px; } .copy { margin-left: 0; }
}

/* a heading before each group of tiles */
.group-head { max-width: var(--read); margin: 0 auto; padding: 130px var(--gut) 48px; text-align: center; }
.statement + .group-head { padding-top: 40px; }
.group-head h2 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -.04em; }
.group-head p { max-width: 640px; margin: 16px auto 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; color: var(--soft); }
@media (max-width: 734px) { .group-head { padding: 90px var(--gut) 32px; } }

/* the island opening, right under the statement */
.video-frame { max-width: var(--col); margin: 56px auto 0; padding: 0; border-radius: 30px; overflow: hidden; background: #0c0c0f; border: 1px solid var(--line); box-shadow: 0 50px 110px -40px rgba(124, 92, 255, .45), 0 30px 70px -30px rgba(0, 0, 0, .8); }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 660; }
.statement { max-width: var(--col); }
@media (max-width: 734px) { .video-frame { margin-top: 36px; border-radius: 18px; } }

/* the tabs in the video: the one on screen lights up, a click jumps the video there */
.tour { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: var(--col); }
.tour button { height: 34px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--soft); font: inherit; font-size: 14px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.tour button:hover { color: var(--text); border-color: var(--soft); }
.tour button.on { background: var(--text); border-color: var(--text); color: var(--bg); }
@media (max-width: 734px) { .tour { gap: 6px; } .tour button { height: 30px; padding: 0 12px; font-size: 13px; } }

/* the second download button (Mac, or Windows when you are on a Mac): outlined */
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line), inset 0 0 0 1.5px color-mix(in srgb, var(--text) 35%, transparent); }
.btn.ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }

.btn[hidden] { display: none; }

/* Words with a fixed English version: shown instead of the Swahili when the browser translates the page
   (Chrome and Edge mark the page with these classes), so the translation reads as written, not as a machine guess */
.en-only { display: none; }
html.translated-ltr .en-only, html.translated-rtl .en-only { display: inline; }
html.translated-ltr .sw-only, html.translated-rtl .sw-only { display: none; }