/* The marketing page, on the Kippo system — 31-8-2026.
 *
 * The app went black-and-magenta the same day, and a landing page in the old
 * charcoal-and-red would have been advertising a product that no longer looks
 * like its screenshots. So this is the same system at marketing scale: a pure
 * black void, everything drawn as a 1px white outline, monospace at every
 * size, and one hot magenta rationed so hard that it lands on the accent noun
 * of a headline, the CTA, and almost nothing else.
 *
 * Kippo's landing devices, used as the reference states them:
 *
 *   THE TWO-TONE DISPLAY HEADLINE. The key noun in #ee1f66, the rest in
 *   white, inside one sentence — the signature, and it never touches body or
 *   subheads. Marked up as <b> in index.html, both languages.
 *
 *   THE OUTLINED CARD. Every screenshot frame is a 1px white border on black
 *   with no fill and NO SHADOW. The old page leaned on big soft shadows to
 *   make the shots read as lit screens; this system says depth comes from
 *   layering and outline contrast, so the bill overlaps the picker instead.
 *
 *   THE ONE GRADIENT. Kippo allows exactly two decorative gradients and puts
 *   them behind the product, never on a card or a button. The phone mockup
 *   stands on the cool cyan-to-mint one — the single moment of colour
 *   richness on the page, and the reference's own alternative now that the
 *   warm gradient's gold stop is out of the product.
 *
 * The two departures the app makes, this page makes for the same reasons —
 * the font is a PAIR because Source Code Pro carries no Arabic, and tracking
 * lands on Latin runs only because Arabic letters join. Both self-hosted from
 * the repo's own files: the site loads nothing from anywhere.
 *
 * The 3D marks that sat above each section heading are retired with the ones
 * in the panel, and replaced by Kippo's own index label — 01 / 02 / 03.
 */

/* The pair. Latin from Source Code Pro, Arabic from Tajawal behind it. */
@font-face {
  font-family: "Source Code Pro";
  src: url("app/fonts/SourceCodePro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("app/fonts/SourceCodePro-Semibold.ttf") format("truetype");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("app/fonts/SourceCodePro-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}
/* The same three files minus the space — the app's own fix (app.css), which
   never reached this page. Source Code Pro's space is a 0.6em monospace cell,
   twice Tajawal's, so every gap in the Arabic hero read as words laid out on
   a grid: 31px between "الصالة" and "كلها" at 52px. The Arabic half leads with
   this family, its space falls through to Tajawal, and every Latin letter and
   digit is still the monospace. It also leaves out the full stop (U+2E): here
   it only ever ends an Arabic sentence, where its own centred cell read as
   "واحدة ." — the page has no decimals for it to keep in line. */
@font-face {
  font-family: "Source Code Pro RTL";
  src: url("app/fonts/SourceCodePro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0-1F, U+21-2D, U+2F-10FFFF;
}
@font-face {
  font-family: "Source Code Pro RTL";
  src: url("app/fonts/SourceCodePro-Semibold.ttf") format("truetype");
  font-weight: 500 600;
  font-display: swap;
  unicode-range: U+0-1F, U+21-2D, U+2F-10FFFF;
}
@font-face {
  font-family: "Source Code Pro RTL";
  src: url("app/fonts/SourceCodePro-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+0-1F, U+21-2D, U+2F-10FFFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("app/fonts/Tajawal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("app/fonts/Tajawal-Bold.ttf") format("truetype");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Tajawal";
  src: url("app/fonts/Tajawal-ExtraBold.ttf") format("truetype");
  font-weight: 800 900;
  font-display: swap;
}

:root {
  /* The browser's own parts — the page scrollbar above all — drawn for the
     black page they sit on rather than in the OS's light scheme. */
  color-scheme: dark;

  --void: #000000;
  --carbon: #29292a;
  --ash: #333333;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.66);
  --faint: rgba(255, 255, 255, 0.46);
  --accent: #ee1f66;
  --accent-deep: #d01755;
  --accent-deeper: #a81145;
  /* Kippo names two decorative gradients. The warm one starts in Sunset Gold,
     and gold is out of this product by the client's decision (31-8-2026), so
     the plane behind the phone takes the cool one — the reference's own
     alternative rather than an invented blend. */
  --grad-terminal: linear-gradient(to right, #33beff, #33ffb8);

  /* Kippo's layout numbers, verbatim. */
  --wrap: 1200px;
  --section-gap: 100px;
  --card-pad: 30px;
  --pad-x: 30px;

  --r-btn: 10px;
  --r-card: 15px;

  --track-ui: 0.1em;
  --track-display: 0.3em;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: "Source Code Pro", "Tajawal", ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;
  font-feature-settings: "zero";
  -webkit-font-smoothing: antialiased;
}
/* The page holds both languages at once, so the Arabic half is chosen by its
   block rather than by html[lang]. The English half keeps the full face: its
   monospace gaps ARE the terminal look. */
#ar {
  font-family: "Source Code Pro RTL", "Tajawal", ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;
}

.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad-x); }

/* --------------------------------------------------------------- buttons -- */

/* Two, and only the first one fills. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  text-transform: uppercase;
  min-height: 42px; padding: 0 18px; border-radius: var(--r-btn);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background .14s, color .14s, border-color .14s;
}
/* Arabic joins; tracking would pull "كلمنا واتساب" into stumps. Latin only. */
#en .btn { letter-spacing: var(--track-ui); }
/* Hover and press go darker, as in the app: white on the resting magenta is
   already only 4.18:1, and the old lighter lift took it to 3.44:1. Hovers only
   where there is a pointer that hovers — a tap on a phone left the lift on. */
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (hover: hover) { .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } }
.btn-primary:active { background: var(--accent-deeper); border-color: var(--accent-deeper); }
/* The ghost outline button — the border IS the button. */
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } }
.btn-tertiary { background: transparent; color: var(--muted); }
@media (hover: hover) { .btn-tertiary:hover { color: var(--ink); } }
/* Until a real number is set the CTA says so rather than dialling a
   placeholder that belongs to a stranger — and it stops looking like the
   thing to press. At 55% opacity the fill was a maroon this palette does not
   have, the app's own "rendering fault" (its disabled primary goes to an ash
   outline for the same reason), on the one button that does nothing. The
   fill moves to the demo instead (landing.js), and the reason is printed
   under the row, because a title never shows to a thumb. */
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:active {
  background: transparent; color: var(--faint); border-color: var(--ash); cursor: not-allowed;
}
.wa-note {
  flex-basis: 100%; margin: 2px 0 0;
  font-size: 12px; line-height: 1.6; color: var(--faint);
}

/* ---------------------------------------------------------------- header -- */

.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(0, 0, 0, .9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ash);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 68px; }
/* The mark replaced the wordmark in the nav and the footer (31-8-2026). Both
   of those said the PRODUCT's name; the café's own name, over in the app,
   keeps its words and gains the mark beside them instead. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; display: block; }
.foot-mark { height: 22px; width: auto; vertical-align: -6px; margin-inline-end: 10px; }
.acts { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------------ hero -- */

.hero { padding-top: 100px; text-align: center; }
.hero h1 {
  margin: 0 auto; max-width: 17ch;
  font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; line-height: 1.19;
  text-transform: uppercase; text-wrap: balance;
}
/* The tracking the display type asks for is Latin's alone. */
#en .hero h1 { letter-spacing: var(--track-display); max-width: 20ch; }
/* The signature: the key noun in the one colour, the rest in white. */
h1 b, .cta-box h2 b, .cap-say h2 b, .phone-sec h2 b { color: var(--accent); font-weight: inherit; }
.lede {
  margin: 26px auto 0; max-width: 52ch;
  font-size: 15px; line-height: 1.88; color: var(--muted);
}
.cta-row { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- screens -- */

/* Every screenshot sits in the same outlined frame. No shadow, no fill: the
   border is the card, and the black inside it is the same black as the page,
   which is what makes the shot itself read as the lit thing. */
.shot {
  border: 1px solid var(--ink); border-radius: var(--r-card);
  padding: 12px; background: var(--void);
}
/* The screenshot itself. It is inside a <picture> now — the page carries a
   phone set as well as a counter set, and swaps at the same 900px breakpoint
   its own columns collapse at, so a phone visitor is shown the app as THEIR
   device renders it rather than a 1240-wide screen they cannot read. */
.shot picture { display: block; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: 8px; border: 1px solid var(--ash);
}
.shot-hero { max-width: 1060px; margin: 66px auto 0; padding: 14px; }

.caps { padding-top: var(--section-gap); display: grid; gap: 130px; }
.cap {
  display: grid; grid-template-columns: minmax(250px, 2fr) 3fr;
  gap: 60px; align-items: center;
}
.cap.flip { grid-template-columns: 3fr minmax(250px, 2fr); }
/* The index label that replaced the 3D mark: a monospace ordinal, in the
   accent, the way a boot screen numbers its lines. */
.cap-say .idx {
  display: block; margin-bottom: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: var(--track-ui);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cap-say h2 {
  margin: 0; font-size: 26px; font-weight: 700; line-height: 1.25;
  text-transform: uppercase;
}
#en .cap-say h2 { letter-spacing: var(--track-ui); }
.cap-say p { margin: 18px 0 0; font-size: 15px; line-height: 1.88; color: var(--muted); max-width: 38ch; }

/* The picker riding over the bill — one shot explaining two screens, and the
   overlap IS the depth. Kippo stacks rather than shadows. The bill is the
   big one because it is what the section says: as the inset, cropped to a
   whole counter screen at half size, its lines came out 3–4px tall. Both
   are the sheet itself now, not the shell around it (the shooter crops),
   and the picker's pictures still read small. */
.stack { position: relative; padding-bottom: 52px; }
.inset {
  position: absolute; inset-inline-start: -16px; bottom: 0; width: 54%;
  padding: 10px; background: var(--void); border-color: var(--ink);
}

/* ------------------------------------------------------ more, and start -- */

/* What the product does without a picture (4-10-2026): six outlined cards,
   the name in white and one line under it in the muted grey. No shot, no
   colour — the screenshots above carry the page; this is the list a reader
   scans for the one feature they came looking for. Then the three steps of
   starting, numbered the way the sections are. */
.more, .start { padding-top: 140px; }
.more h2, .start h2 {
  margin: 0; text-align: center;
  font-size: 26px; font-weight: 700; line-height: 1.25;
  text-transform: uppercase;
}
#en .more h2, #en .start h2 { letter-spacing: var(--track-display); }
.more h2 b, .start h2 b { color: var(--accent); font-weight: inherit; }
.more-grid, .steps {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.more-grid li, .steps li {
  border: 1px solid var(--ink); border-radius: var(--r-card);
  padding: var(--card-pad); display: flex; flex-direction: column; gap: 10px;
}
.more-grid b, .steps b { font-size: 17px; font-weight: 700; line-height: 1.35; }
#en .more-grid b, #en .steps b { letter-spacing: var(--track-ui); text-transform: uppercase; font-size: 15px; }
.more-grid span, .steps li > span:not(.idx) { font-size: 14px; line-height: 1.8; color: var(--muted); }
.steps .idx {
  font-size: 12px; font-weight: 700; letter-spacing: var(--track-ui);
  color: var(--accent); font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- phone -- */

.phone-sec { padding-top: 140px; text-align: center; }
.phone-sec h2 {
  margin: 0; font-size: 26px; font-weight: 700; text-transform: uppercase;
}
#en .phone-sec h2 { letter-spacing: var(--track-display); }
.live {
  margin: 16px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase;
  display: flex; gap: 8px; align-items: center; justify-content: center;
}
#en .live { letter-spacing: var(--track-ui); }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* The one gradient on the page, and it is behind the device rather than on
   it — atmosphere, not chrome. The frame itself is a white outline on black,
   exactly like every other card here. */
/* The gradient is a plane the device stands on, not a halo around it: a band
   across the lower half of the stage, wide enough to read as signage rather
   than as two coloured strips beside the phone. */
/* 100% of the column, not 96vw: inside the padded .wrap 96vw was 24px wider
   than the room it had, and the whole page panned sideways on a phone. And
   clipped, so a device not scaled yet — no script, or before it runs —
   cannot pan it either. */
.phone-stage {
  margin: 44px auto 0; width: min(880px, 100%);
  padding: 60px 0 40px; position: relative;
  display: flex; justify-content: center; overflow: hidden;
}
.phone-stage::before {
  content: ""; position: absolute; inset: 34% 0 0;
  background: var(--grad-terminal); border-radius: var(--r-card);
}
/* The screen is ALWAYS a true 393×852 phone viewport, the one the product is
   designed and tested at, and the whole device scales to the room it has
   (landing.js) — a smaller window gets a smaller phone, never a narrower
   app. At min(380px, 88vw) the owner app rendered in 322–356px and its
   bottom nav cut "الموظفين" to "الموظف": a bug in the frame that read as a
   bug in the product. The demo's own phone stage keeps the same rule. The
   fit box is sized by script to the scaled device so the page lays out
   around it; ltr so the device scales from the corner it is pinned to. */
.phone-fit { position: relative; direction: ltr; width: 419px; height: 878px; }
.phone {
  position: absolute; top: 0; left: 0;
  /* 393×852 of screen + 12px bezel + 1px border each side. */
  width: 419px; height: 878px; transform-origin: top left;
  background: var(--void); border: 1px solid var(--ink);
  border-radius: 46px; padding: 12px;
}
.phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: var(--void); }
.phone-screen iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------- CTA -- */

.cta-sec { padding-top: 130px; padding-bottom: 100px; }
/* An outlined panel, not a filled one. It is the last thing on the page and
   the accent border is what makes it the loudest — no gradient fill, which
   this system reserves for atmosphere. */
.cta-box {
  background: var(--void);
  border: 1px solid var(--accent); border-radius: var(--r-card);
  padding: 72px var(--card-pad); text-align: center;
}
.cta-box h2 {
  margin: 0; font-size: clamp(24px, 3.4vw, 38px); font-weight: 700;
  text-transform: uppercase; line-height: 1.19;
}
#en .cta-box h2 { letter-spacing: var(--track-display); }
.cta-box .cta-row { margin-top: 34px; }

.foot { border-top: 1px solid var(--ash); }
.foot .bar {
  height: auto; padding-block: 30px; font-size: 12px; color: var(--faint);
  text-transform: uppercase;
}
#en .foot .bar { letter-spacing: var(--track-ui); }

/* -------------------------------------------------------------- reveals -- */

/* Set by script only when the observer is available, so a browser without it
   (or with JS off) simply shows everything. */
[data-reveal].armed, [data-tilt].armed { opacity: 0; }
[data-reveal].armed { transform: translateY(24px); }
[data-tilt].armed { transform: perspective(1400px) rotateX(8deg) translateY(44px) scale(.985); }
[data-reveal].armed, [data-tilt].armed {
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms),
              transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
}
[data-tilt].armed { transition-duration: 1.1s; }
[data-reveal].shown, [data-tilt].shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal].armed, [data-tilt].armed { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------- narrower -- */

@media (max-width: 900px) {
  :root { --pad-x: 20px; --section-gap: 84px; }
  .caps { padding-top: var(--section-gap); gap: 84px; }
  .cap, .cap.flip { grid-template-columns: 1fr; gap: 28px; }
  /* The words come first on a phone, whichever side the design puts them on
     for a wide screen. */
  .cap.flip .cap-say { order: -1; }
  .cap-say p { max-width: none; }
  .hero { padding-top: 64px; }
  .shot-hero { margin-top: 44px; }
  .phone-sec { padding-top: 96px; }
  .more, .start { padding-top: 96px; }
  .more-grid, .steps { grid-template-columns: 1fr; margin-top: 36px; gap: 12px; }
  .more-grid li, .steps li { padding: 22px; }
  .cta-sec { padding-top: 90px; padding-bottom: 72px; }
  .cta-box { padding: 48px 22px; }
  .inset { width: 62%; inset-inline-start: -8px; }
}

@media (max-width: 560px) {
  .bar { height: 60px; }
  .brand strong, #en .brand strong { font-size: 15px; letter-spacing: .1em; }
  .btn { padding: 0 12px; font-size: 12px; }
  #en .hero h1 { letter-spacing: var(--track-ui); }
  .phone-stage { padding: 18px 0; }
}