/* Figtree, the product's font, served locally. */
@font-face { font-family: 'Figtree'; src: url(fonts/Figtree-normal.woff2) format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(fonts/Figtree-italic.woff2) format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }

/* One scale for the whole page, the product's (frontend/src/styles/tokens.css): type 14 / 16 / 22 plus two
   display sizes for the headings, spacing 8–24 with section steps above it, three corner radii. Colours and the
   soft gradients are the landing's own (brand/identity.md). */
:root {
  --fs-s: 14px; --fs-m: 16px; --fs-l: 22px; --fs-h2: 44px; --fs-h1: 72px;
  --lh-s: 20px; --lh-m: 26px; --lh-l: 32px; --lh-h2: 52px; --lh-h1: 80px;
  --fw-r: 400; --fw-m: 500; --fw-b: 600;
  --sp-s: 8px; --sp-m: 12px; --sp-l: 16px; --sp-xl: 24px; --sp-2xl: 48px; --sp-3xl: 112px;
  --r-m: 20px; --r-l: 28px;
  --page: 1120px; --gutter: 32px;
  --text: #202934; --muted: #647181; --line: #dfe3ea; --bg: #f5f6fa; --green: #1549D4;
  --cobalt: #1549D4;
  --card: rgb(255 255 255 / .64); --card-edge: rgb(255 255 255 / .94);
  --card-shadow: inset 0 1px 0 #fff, 0 16px 60px rgb(50 69 104 / .06);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-m); line-height: var(--lh-m); color: var(--text); background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
h1, h2 { font-weight: var(--fw-r); }
h3 { font-weight: var(--fw-m); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.glass { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--card-shadow);
  backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); }
@supports not (backdrop-filter: blur(1px)) { .glass { background: #f8faff; } }

/* Arches: the page's one motif, after the arcades of Emirati courtyards. A cobalt arch holds what matters most (the corpus
   figures), two keylines run inside it, and it never ends: it goes on down behind what follows. */
.arch { position: relative; isolation: isolate; color: #fff; background: var(--cobalt); border-radius: 999px 999px 0 0; }
.arch::before, .arch::after { content: ""; position: absolute; z-index: -1; inset: 18px 18px 0; border: 2px solid rgb(239 233 220 / .55);
  border-bottom: 0; border-radius: inherit; }
.arch::after { inset: 36px 36px 0; border-color: rgb(239 233 220 / .3); }

/* Hero: on the page's one background. The corpus figures stand in the cobalt arch; the arch
   reaches down past its row (negative margin) and the product preview lies over it. */
.hero { position: relative; overflow: hidden; min-height: 100vh; padding: 160px 0 var(--sp-2xl); color: #16233f; }
.hero-copy { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-2xl);
  max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }
.hero-main { position: relative; z-index: 1; max-width: 720px; }
.brand { display: inline-flex; align-items: center; gap: .35em; font-size: 30px; line-height: var(--lh-l); font-weight: 800; color: #1549D4; text-decoration: none; }
.brand img { display: block; height: 1em; width: auto; }
.hero h1 { margin-top: 0; font-weight: var(--fw-b); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -2.5px; }
/* The UAE flag stands in the headline after "UAE", a word-space either side, centred on the capitals */
.flag { display: inline-block; height: .8em; width: auto; margin: 0 .22em 0 .26em; vertical-align: -.05em;
  box-shadow: 0 0 0 1px rgb(32 41 52 / .12); }
/* The second line of the headline: italic, no tile. */
.hl { display: inline-block; margin: 6px 0 0; padding: 0 .08em 0 0; color: inherit; background: none;
  font-style: italic; font-weight: var(--fw-m); letter-spacing: -1.5px; }
.lead { max-width: 560px; margin: var(--sp-xl) auto 0; font-size: var(--fs-l); line-height: var(--lh-l); color: var(--muted); }
.hero .lead { margin-left: 0; }
.hero .lead, .hero .note, .hero .places { color: #4a566c; }
.hero .stats > div > span { color: rgb(255 255 255 / .85); }

/* The product's white button only changes its shadow on hover (controls.css), which on a plain page reads as no hover. */
html .button.filled:not(:disabled):hover { background: #ececec; }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--green); }
.team-note a { transition: color .2s; }
.team-note a:hover { color: var(--green); }

/* The product preview: the real chat in an iframe (demo/, built from frontend/src/landing-demo.js) */
.demo { position: relative; max-width: 1140px; margin: var(--sp-2xl) auto 0; padding: 0 var(--gutter); scroll-margin-top: var(--sp-xl); }
.product-demo { display: block; width: 100%; height: 680px; border: 1px solid #fff; border-radius: var(--r-l);
  background: #f6f8fb; box-shadow: 0 24px 80px rgb(64 88 118 / .13); }
.note { margin-top: var(--sp-m); text-align: center; font-size: var(--fs-s); line-height: var(--lh-s); color: var(--muted); }
.places { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-s) var(--sp-xl); margin-top: var(--sp-2xl); padding: 0 var(--gutter); color: var(--muted); font-size: var(--fs-l); line-height: var(--lh-l); }

/* Top bar: a glass strip that stays at the top while the page scrolls */
.nav-wrap { position: fixed; top: var(--sp-xl); left: 0; right: 0; z-index: 10; padding: 0 var(--gutter); }
.nav { max-width: 1232px; height: 64px; margin: 0 auto; padding: 0 var(--sp-m) 0 28px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px;
  background: rgb(255 255 255 / .92); transition: background-color .3s; /* white at the top of the page */
  box-shadow: 0 16px 60px rgb(50 69 104 / .06); } /* no inset highlight: with the 1px border it read as a double top edge */
/* once the page is scrolled the bar turns #CDDBFF (#A3BDFF lightened), barely see-through; the border stays the glass's white */
.nav-wrap.scrolled .nav { background: rgb(205 219 255 / .92); }
.nav-links { display: flex; gap: 32px; font-size: var(--fs-m); line-height: var(--lh-m); font-weight: var(--fw-m); }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--text); }

/* Footer: dark, the full width of the page */
footer { padding: var(--sp-2xl) 0 var(--sp-xl); background: #151b23; color: #fff; }
.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); }
.footer-top p, .footer-top > a:last-child { color: rgb(255 255 255 / .6); }
.footer-top > a:last-child { text-decoration: none; transition: color .2s; }
.footer-top > a:last-child:hover { color: #fff; }
.footer-bottom { margin-top: var(--sp-xl); padding-top: var(--sp-xl); border-top: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-s); line-height: var(--lh-s); color: rgb(255 255 255 / .5); }

/* Sections */
.section { padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
.section-heading { text-align: center; max-width: 760px; margin: 0 auto var(--sp-2xl); }
.section-heading h2, .faq h2, .closing h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -1.5px; }
.section-heading p { margin-top: var(--sp-l); color: var(--muted); }

/* The corpus figures: two heavy numbers stacked at the right edge of the hero, as loud as the headline.
   The reels in js/stats.js step by --lh-h1, the numbers' own line height. */
.stats { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: var(--sp-xl);
  margin-bottom: -320px; padding: 200px 64px calc(320px + 56px); text-align: right; }
.stats strong { display: block; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 800; letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.stats > div { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; column-gap: var(--sp-l); }
.stats > div > span { grid-column: 2; margin-top: 4px; font-size: var(--fs-l); line-height: var(--lh-l); color: var(--muted); }
.stats svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The numbers' negative tracking makes a digit's ink wider than its advance: the reel gets that room on the right
   (padding) and gives it back (margin), so it clips the strip only above and below. */
.reel { display: inline-block; height: var(--lh-h1); overflow: hidden; vertical-align: top; padding-right: 6px; margin-right: -6px;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.reel-strip { display: block; white-space: pre; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); margin-top: var(--sp-2xl); }
.card { padding: var(--sp-xl); border-radius: var(--r-m); border: 1px solid #fff; }
.card svg { width: 24px; height: 24px; fill: none; stroke: #6584a5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-top: var(--sp-l); font-size: var(--fs-l); line-height: var(--lh-l); letter-spacing: -.3px; }
.card p { margin-top: var(--sp-s); color: var(--muted); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl); max-width: 800px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-m); }
/* the page has one background, so the plans stand on it as white sheets */
.plan, .plan.glass { background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 60px rgb(80 64 32 / .06); }
.plan h3 { font-size: var(--fs-l); line-height: var(--lh-l); }
.plan > p { margin-top: var(--sp-s); color: var(--muted); }
.plan > .price { margin-top: var(--sp-xl); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -1.5px; color: var(--text); }
.price span { font-size: var(--fs-m); letter-spacing: 0; color: var(--muted); }
.plan ul { flex: 1; margin: var(--sp-xl) 0 32px; padding-left: 20px; color: var(--muted); }
.plan li + li { margin-top: var(--sp-s); }
.plan .button { align-self: flex-start; }
.team-note { margin-top: var(--sp-2xl); text-align: center; color: var(--muted); }
.team-note a { color: var(--text); }

/* Questions, and the closing glow */
.faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--sp-3xl); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: var(--sp-xl); padding: 20px 0; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: var(--fs-l); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--sp-xl) 20px 0; color: var(--muted); }
/* Closing: one still, pale panel (no motion, nothing like the hero's colour), with the composer as the call to action */
.closing { padding: var(--sp-2xl) var(--gutter) var(--sp-3xl); }
.closing-panel { max-width: var(--page); margin: 0 auto; padding: 96px var(--gutter); text-align: center; border: 1px solid #fff; border-radius: 40px;
  background: radial-gradient(ellipse 70% 90% at 50% 0%, #fff, transparent 70%), linear-gradient(160deg, #eaf0f8, #e4eaf5 55%, #ebe7f3);
  box-shadow: inset 0 1px 0 #fff, 0 24px 80px rgb(64 88 118 / .08); }
.closing p { max-width: 460px; margin: var(--sp-l) auto 0; color: var(--muted); }
.ask { display: flex; align-items: center; gap: var(--sp-m); max-width: 640px; margin: var(--sp-2xl) auto 0; padding: 10px 10px 10px 28px;
  border: 1px solid #fff; border-radius: 999px; background: rgb(255 255 255 / .78); box-shadow: 0 12px 40px rgb(64 88 118 / .1); transition: background .25s, box-shadow .25s; }
.ask:hover, .ask:focus-within { background: #fff; box-shadow: 0 16px 48px rgb(64 88 118 / .16); }
.ask:focus-within { outline: 2px solid var(--green); outline-offset: 4px; }
.ask input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-l); line-height: var(--lh-l); color: var(--text); }
.ask input::placeholder { color: var(--muted); opacity: 1; }
.send { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #1549D4; color: #fff; cursor: pointer; transition: background .25s, opacity .25s; }
/* As in the chat composer: the lens is dim until there is a question to send */
.ask input:placeholder-shown + .send { opacity: .35; }
.ask svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 800px) {
  :root { --fs-h1: 40px; --lh-h1: 48px; --fs-h2: 32px; --lh-h2: 40px; --sp-3xl: 64px; --gutter: 16px; }
  .lead { font-size: var(--fs-m); line-height: var(--lh-m); }
  .hero { padding-top: 120px; }
  .hero h1 { letter-spacing: -1px; }
  .nav-wrap { top: var(--sp-l); }
  .nav { padding-left: var(--sp-l); }
  .nav-links { display: none; }
  .footer-top { flex-wrap: wrap; }
  .footer-top p { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-s); }
  .cards, .plans, .faq { grid-template-columns: 1fr; }
  .faq { gap: var(--sp-xl); }
  .closing-panel { padding: 56px var(--sp-l); border-radius: var(--r-l); }
  .ask { padding-left: var(--sp-xl); }
  .ask input { font-size: var(--fs-m); line-height: var(--lh-m); }
  .hero-copy { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .stats { margin-bottom: -160px; padding: 150px 40px calc(160px + 36px); }
  .stats { flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-xl); text-align: left; }
  .stats strong { letter-spacing: -1.5px; }
  .stats > div { column-gap: var(--sp-m); }
  .stats svg { width: 36px; height: 36px; }
  .stats > div > span { font-size: var(--fs-m); line-height: var(--lh-m); }
  .places { font-size: var(--fs-m); gap: var(--sp-s) var(--sp-l); }
  .product-demo { height: 640px; border-radius: var(--r-m); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}