/*
 * Public marketing site. Loaded only by layouts/site.php, so none of this weight lands on
 * the 90-odd application screens.
 *
 * It inherits every colour from app.css rather than restating them, which is the point of
 * having tokens: change the family palette once and the marketing site follows.
 *
 * Bidirectional by construction. The Arabic version is not a mirrored afterthought -- the
 * layout uses logical properties (margin-inline, padding-inline, border-inline) and flex,
 * so RTL is the same CSS read the other way. The one place direction is stated explicitly
 * is the step numbers, where the connector has to point at the next step.
 */
.site{background:var(--bg)}
.wrap{max-width:1140px;margin:0 auto;padding-inline:1.5rem}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.site-head-in{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem}
.site-head .brand{color:var(--text);text-decoration:none;padding:0;font-size:1.1rem}
.site-nav{display:flex;gap:1.25rem;margin-inline-start:auto;font-size:.88rem}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover{color:var(--accent)}
.site-head-actions{display:flex;align-items:center;gap:.6rem}
.lang{font-size:.85rem;color:var(--muted);text-decoration:none;padding:.3rem .6rem;border-radius:var(--radius);border:1px solid var(--border)}
.lang:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
@media (max-width:900px){.site-nav{display:none}.site-head-in{gap:.75rem}}

/* ---- sections ---- */
section{padding-block:4.5rem}
.band{background:var(--surface)}
.deep{background:var(--navy);color:#e6f2f3}
.deep h2,.deep h3{color:#fff}
.deep p{color:#a9cfd4}
section h2{font-size:1.85rem;letter-spacing:-.02em;margin-bottom:.6rem;max-width:22ch}
section .lead{font-size:1.05rem;color:var(--muted);max-width:68ch;line-height:1.7;margin-bottom:2.2rem}
.kicker{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;color:var(--accent);margin-bottom:.8rem}

/* ---- hero ---- */
.hero{padding-block:4rem 4.5rem;background:linear-gradient(160deg,#f8fbfc,#eefafb 55%,#e0f2f4)}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero h1{font-size:2.7rem;line-height:1.15;letter-spacing:-.03em;margin-bottom:1rem}
.hero .lead{font-size:1.1rem;margin-bottom:1.6rem}
.hero-art svg{width:100%;height:auto;display:block}
.ticks{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.5rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.ticks .ico{color:var(--ok);margin-top:.15em}
@media (max-width:900px){.hero-in{grid-template-columns:1fr}.hero h1{font-size:2rem}.hero-art{order:-1}}

/* ---- tiles ----
 *
 * Frosted glass, and glass needs something behind it or it is only a grey box. So the two
 * card sections carry a soft tinted wash and the cards sit on top of it, blurring whatever
 * passes underneath.
 *
 * Each card is colour-coded on a six-step cycle: the rule along its top, the icon and the
 * heading take the accent, and the body text takes a dark relative of the same hue rather
 * than one flat grey. Twelve cards on one screen is a lot to take in; colour gives the eye
 * somewhere to land and makes a card findable again ("the green one") on the second visit.
 *
 * The palette is deliberately muted — teal, navy, forest, bronze, aubergine, slate. This is
 * a page a finance director reads before signing something, and a row of bright highlighter
 * colours would read as a consumer app rather than as an operations system.
 */
.cards4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}

/* The wash. isolation:isolate keeps the z-index:-1 layer above the section's own background
   but below its content, without it escaping to sit behind the page. */
#what,#who{position:relative;isolation:isolate;overflow:hidden}
#what{background:linear-gradient(175deg,#f5fafb 0%,#eef5f8 55%,#f7f4ee 100%)}
#who{background:linear-gradient(185deg,#f8fbfc 0%,#f1f6f9 100%)}
#what::before,#who::before{content:"";position:absolute;inset:-25% -10% auto -10%;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 60% at 16% 18%,rgba(15,174,186,.16),transparent 70%),
             radial-gradient(34% 55% at 84% 10%,rgba(240,205,138,.20),transparent 72%),
             radial-gradient(32% 52% at 52% 88%,rgba(47,93,148,.12),transparent 70%)}

.tile{position:relative;overflow:hidden;padding:1.4rem;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.54));
  -webkit-backdrop-filter:saturate(165%) blur(14px);backdrop-filter:saturate(165%) blur(14px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 1px rgba(4,53,61,.04),0 14px 30px -16px rgba(4,53,61,.28);
  transition:transform .18s ease,box-shadow .18s ease}
/* The band rule used to paint tiles opaque; glass has to win over it. */
.band .tile{background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.54))}
.tile::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--tile-accent,#0b7c88)}
.tile:hover{transform:translateY(-2px);box-shadow:0 1px 1px rgba(4,53,61,.05),0 20px 38px -18px rgba(4,53,61,.34)}
.tile h3{font-size:1rem;text-transform:none;letter-spacing:0;color:var(--tile-accent,#0b7c88);margin:.7rem 0 .4rem;font-weight:600}
.tile p{font-size:.88rem;color:var(--tile-ink,#3a4a50);line-height:1.65;margin:0}
.tile-ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--tile-wash,var(--accent-50));color:var(--tile-accent,var(--accent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.tile-ico .ico{width:20px;height:20px}

.cards4 .tile:nth-child(6n+1){--tile-accent:#0b7c88;--tile-ink:#2b4a4e;--tile-wash:rgba(11,124,136,.12)}
.cards4 .tile:nth-child(6n+2){--tile-accent:#2f5d94;--tile-ink:#2d3e52;--tile-wash:rgba(47,93,148,.12)}
.cards4 .tile:nth-child(6n+3){--tile-accent:#1a7a49;--tile-ink:#2a4739;--tile-wash:rgba(26,122,73,.12)}
.cards4 .tile:nth-child(6n+4){--tile-accent:#8f6218;--tile-ink:#4a3d26;--tile-wash:rgba(143,98,24,.14)}
.cards4 .tile:nth-child(6n+5){--tile-accent:#6a4a86;--tile-ink:#3d3448;--tile-wash:rgba(106,74,134,.12)}
.cards4 .tile:nth-child(6n+6){--tile-accent:#43616f;--tile-ink:#2f3f47;--tile-wash:rgba(67,97,111,.13)}

/* Older browsers get an opaque card rather than a washed-out one nobody can read. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .tile,.band .tile{background:rgba(255,255,255,.94)}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}

/* ---- steps ---- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.steps li{position:relative;padding-top:.4rem}
.steps .num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-500);color:#04353d;font-weight:700;font-size:.95rem;margin-bottom:.8rem}
.steps h3{font-size:1rem;text-transform:none;letter-spacing:0;font-weight:600;margin-bottom:.35rem}
.steps p{font-size:.88rem;line-height:1.65;margin:0}

/* ---- screens ---- */
.screens{display:grid;grid-template-columns:1.6fr 1fr;gap:2.5rem;align-items:end}
.screens figure{margin:0}
.screens svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 30px rgba(4,53,61,.10))}
/* The drawn screenshots are pictures of an English interface: left-to-right whatever the
   page around them is. The SVGs say so themselves too; this is the backstop. */
.hero-art svg,.screens svg{direction:ltr;unicode-bidi:isolate}
.screens figcaption{margin-top:1.1rem}
.screens figcaption strong{display:block;font-size:1rem;margin-bottom:.3rem}
.screens figcaption span{font-size:.88rem;color:var(--muted);line-height:1.65}
/* The transport row is two wide drawings side by side rather than a wide one beside a phone,
   so it needs equal columns -- and topped, not bottomed, because the two are the same height. */
.screens.pair{grid-template-columns:1fr 1fr;align-items:start}
.screens + .screens{margin-top:3rem}
/* Two light sections in a row (#screens then #transport-screens) would read as one long
   block; a hairline is enough to say they are two. */
#transport-screens{border-top:1px solid var(--border)}
@media (max-width:820px){.screens{grid-template-columns:1fr;gap:2rem}.screens.pair{grid-template-columns:1fr}}

/* ---- rows ---- */
.rows{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2.5rem}
.row-item{display:flex;gap:1rem;align-items:flex-start}
.row-item h3{font-size:.98rem;text-transform:none;letter-spacing:0;font-weight:600;color:var(--text);margin-bottom:.3rem}
.row-item p{font-size:.88rem;color:var(--muted);line-height:1.65;margin:0}
@media (max-width:760px){.rows{grid-template-columns:1fr}}

/* ---- demo ---- */
.demo-in{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.demo-card{margin:0}
.ok-h{font-size:1.2rem;text-transform:none;letter-spacing:0;color:var(--ok);margin-bottom:.5rem}
/* Honeypot. Hidden with the clip pattern, NOT left:-9999px.
   Learned live: shoving it 9999px to the left extends the scrollable canvas that far, and
   an RTL document starts scrolled to the right edge -- so the Arabic homepage opened on
   9999px of empty space and looked completely blank while the HTML was perfectly fine.
   Clipping hides the field without adding any canvas at all, in either direction. Still
   not display:none, because bots skip those and fill this one. */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){.demo-in{grid-template-columns:1fr;gap:1.8rem}}

/* ---- footer ---- */
.site-foot{background:var(--navy);color:#a9cfd4;padding-block:2.5rem}
.site-foot-in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.site-foot .brand{color:#fff;padding:0;margin-bottom:.5rem}
.site-foot a{color:#e6f2f3}
.site-foot p{margin:.25rem 0}

/* ---- narrow phones ----
 * The wordmark plus the three header actions need about 403px; a phone offers 375-390.
 * .brand is a shrinkable flex item and the buttons are not, so the overflow was taken out
 * of the logo and name until they vanished. Wrapping the row puts the mark on its own line
 * instead of sacrificing it, and flex:none stops it being squeezed again. */
@media (max-width:620px){
  .wrap{padding-inline:1rem}
  .site-head-in{flex-wrap:wrap;row-gap:.5rem}
  .site-head .brand{flex:none}
  .site-head-actions{margin-inline-start:auto}
}