/* ============================================================
   ARIA - Autonomous Robotic Intelligence in the Air
   Design tokens + marketing site styles.
   ============================================================ */
:root{
  --ink-950:#06080d;
  --ink-900:#0a0d14;
  --ink-850:#10141d;
  --ink-800:#171d2b;
  --ink-700:#232b3d;
  --line:rgba(210,225,235,.1);
  --line-hover:rgba(210,225,235,.22);
  --text-1:#f2f6f8;
  --text-2:#c7d2dc;
  --text-3:#8b96a5;
  --text-4:#848fa1;
  --cyan:#4fd1e8;
  --cyan-dim:#2a8a9c;
  --amber:#f0b860;
  --amber-dim:#b9873f;
  --green:#6ee7b7;
  --coral:#f0857a;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Geist has no Arabic glyphs, so Arabic falls through, glyph by glyph, to the best UI face each
     platform ships: SF Arabic (Apple), Segoe UI (Windows), Noto (Android, ChromeOS, Linux). */
  --arabic:"IBM Plex Sans Arabic","SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic","Noto Kufi Arabic","Dubai",Tahoma;
  --display:"Geist",-apple-system,BlinkMacSystemFont,var(--arabic),sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
}

@font-face{font-family:'Geist';font-weight:100 900;font-display:swap;src:url(../fonts/geist.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:100 900;font-display:swap;src:url(../fonts/geist-mono.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink-900)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink-900);color:var(--text-2);font-family:var(--display);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:var(--ink-900)}

.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(56px,9vw,110px)}

.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.eyebrow b{color:var(--cyan);font-weight:500}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.02em;color:var(--text-1)}
.h-hero{font-size:clamp(36px,5.4vw,64px);line-height:1.04;letter-spacing:-.03em}
.h-lg{font-size:clamp(28px,3.4vw,42px);line-height:1.08}
.h-md{font-size:clamp(19px,2vw,24px);line-height:1.2}
.lead{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--text-3);max-width:56ch}

.brand-word{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase}
.brand-word .dot{color:var(--cyan)}

/* ---------- pill button ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-1);background:rgba(255,255,255,.03);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:rgba(255,255,255,.07);border-color:var(--line-hover);transform:translateY(-1px)}
.btn--solid{background:var(--text-1);color:var(--ink-900);border-color:transparent}
.btn--solid:hover{background:#fff}
.btn--cyan{border-color:rgba(79,209,232,.35);color:var(--cyan)}
.btn--cyan:hover{background:rgba(79,209,232,.1)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:18px var(--gutter)}
.nav__pill{pointer-events:auto;width:min(760px,100%);display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(10,13,20,.55);
  border:1px solid var(--line);backdrop-filter:blur(24px) saturate(140%)}
.nav__brand{text-transform:uppercase;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--text-1)}
.nav__brand svg{width:18px;height:18px;color:var(--cyan)}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);transition:color .3s var(--ease)}
.nav__links a:hover{color:var(--text-1)}
.nav__cta{display:flex;align-items:center;gap:8px}
@media (max-width:720px){.nav__links{display:none}}

/* ---------- video hero ---------- */
.vhero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-950)}
.vhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05)}
.vhero__grade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,13,.5) 0%,rgba(6,8,13,.2) 30%,rgba(6,8,13,.78) 62%,var(--ink-900) 100%)}
.vhero__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;
  padding-bottom:clamp(60px,9vw,110px);padding-top:160px}
.vhero__title{max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.vhero__title .accent{color:var(--cyan)}
.vhero__lead{max-width:58ch;color:var(--text-2);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.vhero__ctas{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;justify-content:center}

/* ---------- three shapes ---------- */
.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);margin-top:clamp(36px,5vw,48px)}
.shape{padding:24px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.shape h3{margin:18px 0 8px;font-size:16px}
.shape p{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
.shape__diagram{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:72px;padding:14px;border-radius:10px;background:var(--ink-850);
  font-family:var(--mono);font-size:11px;color:var(--text-3)}
.shape__diagram--stack{flex-direction:column;align-items:flex-start;gap:6px}
.shape__diagram--stack>span{display:flex;align-items:center;gap:8px}
.shape__drone{width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(79,209,232,.6);flex:0 0 auto}
.shape__arrow{color:var(--text-4)}
.shape__tool{padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);background:rgba(255,255,255,.03)}
.shape__swap{color:var(--amber);font-size:15px;padding:0 2px;cursor:help}
@media (max-width:760px){.shapes{grid-template-columns:1fr}}

/* ---------- tool rack ---------- */
.rack{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,4vw,36px)}
.rack__tool{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:12.5px;color:var(--text-2);transition:border-color .3s var(--ease),color .3s var(--ease)}
.rack__tool:hover{border-color:rgba(79,209,232,.4);color:var(--text-1)}

/* ---------- cta band ---------- */
.cta-band{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);margin-top:clamp(36px,5vw,48px)}
.step{padding:24px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.step__num{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.08em}
.step h3{margin:10px 0 8px;font-size:16px}
.step p{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:36px}
.footer__row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer__brand{text-transform:uppercase;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--text-3)}
.footer__links{display:flex;gap:20px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-4)}
.footer__links a:hover{color:var(--text-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- real-work cases ---------- */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,24px);margin-top:clamp(36px,5vw,48px)}
.case{padding:26px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:12px}
.case__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.case h3{font-size:19px}
.case__say{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2);padding:12px 14px;border-radius:10px;background:var(--ink-850);border-inline-start:2px solid var(--cyan)}
.case__plan{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.case__plan .shape__drone{width:10px;height:10px;margin-inline-start:6px}
.case__plan .shape__drone:first-child{margin-inline-start:0}
.case__why{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
@media (max-width:760px){.cases{grid-template-columns:1fr}}

/* ---------- the two differentiators ---------- */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,24px);margin-top:clamp(36px,5vw,48px)}
.diff__card{padding:28px;border-radius:20px;border:1px solid rgba(79,209,232,.22);background:rgba(79,209,232,.04);display:flex;flex-direction:column;gap:14px}
.diff__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.diff__card h3{font-size:21px}
.diff__flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px;border-radius:12px;background:var(--ink-850);font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
.diff__flow--stack{flex-direction:column;align-items:flex-start;gap:8px}
.diff__step{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.diff__step i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(79,209,232,.6)}
.diff__swap{color:var(--amber);font-size:11px;letter-spacing:.04em}
.diff__say{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2);padding:12px 14px;border-radius:10px;background:var(--ink-850);border-inline-start:2px solid var(--amber)}
.diff__why{margin:0;font-size:13px;line-height:1.65;color:var(--text-3)}
@media (max-width:760px){.diff{grid-template-columns:1fr}}

/* ---------- the idea strip: you → ARIA → drones+tools ---------- */
.idea{display:grid;grid-template-columns:1fr 28px 1.15fr 28px 1fr;align-items:stretch;gap:clamp(10px,1.6vw,18px);margin-top:clamp(36px,5vw,48px)}
.idea__part{padding:24px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:10px}
.idea__part--ai{border-color:rgba(79,209,232,.3);background:rgba(79,209,232,.04)}
.idea__num{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.08em}
.idea__part h3{font-size:17px}
.idea__part p{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
.idea__say{font-size:13.5px!important;color:var(--text-2)!important;padding:11px 13px;border-radius:10px;background:var(--ink-850);border-inline-start:2px solid var(--cyan)}
.idea__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.5;color:var(--text-3)}
.idea__list li{position:relative;padding-inline-start:16px}
.idea__list li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.idea__list b{color:var(--text-1);font-weight:500}
.idea__arrow{align-self:center;width:28px;height:28px;position:relative}
.idea__arrow::before{content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:var(--line-hover)}
.idea__arrow::after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;border-inline-end:1px solid var(--line-hover);border-top:1px solid var(--line-hover);transform:translateY(-50%) rotate(45deg)}
.idea__chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--text-2)}
.idea__step{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--ink-850)}
.idea__step i{width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 6px var(--tc)}
.idea__swap{color:var(--amber);font-size:10.5px}
@media (max-width:860px){.idea{grid-template-columns:1fr}.idea__arrow{height:28px;width:28px;margin:0 auto;transform:rotate(90deg)}}

/* hardware: grouped rack */
.rack-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,6vw,64px)}
.rack-head__note{font-size:13px;color:var(--text-3)}
.rack{margin-top:14px;align-items:flex-start;flex-wrap:nowrap}
.rack__group{flex:0 0 70px;padding-top:11px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.rack__tools{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
@media (max-width:600px){.rack{flex-wrap:wrap}.rack__group{flex-basis:100%;padding-top:0}}
.diff__card--wide{grid-column:1 / -1}
.diff__step--sense i{background:#c9f04a;box-shadow:0 0 8px rgba(201,240,74,.6)}.diff__step--act i{background:var(--green);box-shadow:0 0 8px rgba(110,231,183,.6)}

/* ---------- live demo: the tool swap on loop ---------- */
.demo{margin-top:clamp(28px,4vw,40px);border-radius:20px;border:1px solid var(--line);background:var(--ink-850);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr)}
.demo__stage{position:relative;min-height:360px;background:radial-gradient(80% 70% at 50% 40%,rgba(79,209,232,.07),transparent 70%),var(--ink-900);overflow:hidden}
.demo__site{position:absolute;left:14%;top:26%;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.demo__site-pin{width:52px;height:64px;border:1px solid rgba(79,209,232,.45);border-radius:6px;background:rgba(79,209,232,.06);box-shadow:inset 0 0 24px rgba(79,209,232,.08)}
.demo__dock{position:absolute;right:14%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.demo__dock-ring{width:64px;height:64px;border-radius:50%;border:1px solid rgba(79,209,232,.5);box-shadow:0 0 0 10px rgba(79,209,232,.06),0 0 30px rgba(79,209,232,.18);animation:demoPulse 2.4s ease-in-out infinite}
@keyframes demoPulse{0%,100%{box-shadow:0 0 0 10px rgba(79,209,232,.06),0 0 30px rgba(79,209,232,.18)}50%{box-shadow:0 0 0 16px rgba(79,209,232,.03),0 0 40px rgba(79,209,232,.28)}}
.demo__rack{position:absolute;right:14%;bottom:22px;transform:translateX(calc(50% - 32px));display:flex;gap:6px}
.demo__slot{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-family:var(--mono);font-size:9.5px;color:var(--text-3);transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.demo__slot i{width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 8px var(--tc)}
.demo__slot.is-out{opacity:.25}
.demo__drone{position:absolute;width:52px;height:36px;color:var(--text-2);transition:left 2.2s var(--ease),top 2.2s var(--ease);--x:78%;--y:50%;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2}
.demo__drone svg{width:100%;height:100%;display:block}
.demo__drone.is-flying .demo__rotor{animation:demoRotor .3s linear infinite}
@keyframes demoRotor{to{transform:rotate(360deg)}}
.demo__tool{position:absolute;left:50%;bottom:-4px;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);background:var(--tc,transparent);box-shadow:0 0 14px var(--tc,transparent);opacity:0;transition:opacity .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.demo__tool.is-on{opacity:1}
.demo__log{padding:18px 20px;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:9px;font-size:12.5px;line-height:1.45;color:var(--text-3);overflow:hidden}
.demo__log p{margin:0;opacity:0;transform:translateY(6px);animation:demoIn .5s var(--ease) forwards}
.demo__log p b{color:var(--text-1);font-weight:500}
.demo__log p.swap{color:var(--amber);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
@keyframes demoIn{to{opacity:1;transform:none}}
@media (max-width:760px){.demo{grid-template-columns:1fr}.demo__log{border-inline-start:0;border-top:1px solid var(--line)}}

/* ---------- airframes ---------- */
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px);margin-top:clamp(36px,5vw,48px)}
.frame{padding:26px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.frame__badge{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--cyan);background:rgba(79,209,232,.12);border:1px solid rgba(79,209,232,.3)}
.frame h3{margin:14px 0 4px;font-size:18px}
.frame__spec{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.frame p{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
@media (max-width:760px){.frames{grid-template-columns:1fr}}
@media (max-width:600px){.demo__rack{right:auto;left:12px;transform:none;flex-wrap:wrap;max-width:calc(100% - 24px)}}

/* the fleet grid: each badge takes its drone's colour */
.frames--fleet .frame__badge{color:var(--fc,var(--cyan));background:color-mix(in srgb,var(--fc,var(--cyan)) 10%,transparent);border-color:color-mix(in srgb,var(--fc,var(--cyan)) 35%,transparent)}
@media (min-width:761px) and (max-width:1000px){.frames--fleet{grid-template-columns:repeat(2,1fr)}}
/* the tool rack is a teaser: visibly there, visibly not yet */
.soon-pill{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.rack--soon{opacity:.55}


/* ============================================================
   Landing, second pass: show the product, not paragraphs about it.
   ============================================================ */
.btn--sm{padding:9px 16px;font-size:11px}
.btn--sm{white-space:nowrap}
@media (max-width:420px){.nav__cta{gap:6px}.nav__cta .btn--sm{padding:9px 12px}}

/* hero prompt: a sentence being said, then who ARIA would send */
.sayit{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:30px auto 0;padding:11px 16px;max-width:min(680px,100%);min-height:48px;border-radius:16px;text-align:start;
  background:rgba(8,11,17,.62);border:1px solid rgba(79,209,232,.28);backdrop-filter:blur(10px);box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.sayit__mic{display:inline-flex;align-items:center;gap:2.5px;height:16px;flex:0 0 auto}
.sayit__mic i{width:3px;border-radius:2px;background:var(--cyan);animation:vb 1s ease-in-out infinite}
.sayit__mic i:nth-child(2){animation-delay:-.7s}.sayit__mic i:nth-child(3){animation-delay:-.3s}.sayit__mic i:nth-child(4){animation-delay:-.5s}
@keyframes vb{0%,100%{height:25%}50%{height:100%}}
.sayit__text{font-size:14.5px;color:var(--text-1)}
.sayit__caret{width:1.5px;height:17px;margin-inline-start:-8px;background:var(--cyan);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.sayit__out{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto;opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sayit__out.is-in{opacity:1;transform:none}
.sayit__out span{display:inline-flex;gap:6px;padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:10.5px;color:var(--text-2);border:1px solid color-mix(in srgb,var(--dc) 50%,transparent);background:color-mix(in srgb,var(--dc) 9%,transparent)}
.sayit__out b{color:var(--dc);font-weight:600}
.vhero__trust{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.vhero__trust span::before{content:"";display:inline-block;width:5px;height:5px;margin-inline-end:8px;border-radius:50%;background:var(--green);vertical-align:middle;box-shadow:0 0 8px var(--green)}

/* showcase: the real simulation in a window frame, with the conversation beside it */
.show{margin-top:clamp(28px,4vw,44px);border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--ink-850);box-shadow:0 60px 120px -50px rgba(79,209,232,.25),0 30px 60px -30px rgba(0,0,0,.9)}
.show__chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-4)}
.show__chrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12)}
.show__chrome span{margin-inline-start:8px}
.show__live{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--green);text-transform:uppercase;letter-spacing:.1em;font-size:9.5px}
.show__live u{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:caret 1.4s steps(2) infinite}
.show__body{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:clamp(440px,52vw,600px)}
.show__map{position:relative;min-width:0;background:#0a0d14}
.show__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.show__veil{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);background:#0a0d14;transition:opacity .6s var(--ease)}
.show__veil.is-gone{opacity:0;pointer-events:none}
.show__chat{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px;border-inline-start:1px solid var(--line);overflow:hidden;font-size:12.5px;line-height:1.5}
.sc{animation:scIn .45s var(--ease)}
@keyframes scIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sc--you{align-self:flex-end;max-width:88%;padding:9px 12px;border-radius:13px 13px 3px 13px;background:rgba(79,209,232,.12);border:1px solid rgba(79,209,232,.3);color:var(--text-1)}
.sc--aria{color:var(--text-2)}.sc--aria b{color:var(--amber);font-weight:600}
.sc--plan{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:11px;border:1px solid rgba(79,209,232,.3);background:rgba(79,209,232,.05)}
.sc--plan b{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-weight:500}
.sc--plan span{padding-inline-start:10px;border-inline-start:2px solid var(--dc);color:var(--text-1);font-size:12px}
.sc--alert{padding:9px 12px;border-radius:11px;border:1px solid rgba(240,133,122,.4);background:rgba(240,133,122,.07);color:var(--text-1)}
.sc--alert b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);font-weight:500}
.sc--done{padding:9px 12px;border-radius:11px;border:1px solid rgba(110,231,183,.35);background:rgba(110,231,183,.06);color:var(--text-2)}
.sc--done b{color:var(--green)}
.sc--shot{border-radius:10px;overflow:hidden;border:1px solid rgba(240,133,122,.4);width:78%}
.sc--shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sc--shot span{display:block;padding:4px 8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.show-fallback{display:none}
.no-show .show{display:none}.no-show .show-fallback{display:block}
@media (max-width:899px){.show{display:none}.show-fallback{display:block}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(32px,4vw,48px)}
.tile{display:flex;flex-direction:column;padding:18px 20px 22px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));transition:border-color .3s var(--ease),transform .3s var(--ease)}
.tile:hover{border-color:var(--line-hover);transform:translateY(-2px)}
.tile--wide{grid-column:span 2}
.tile__viz{position:relative;height:150px;margin:-4px -6px 16px;border-radius:12px;overflow:hidden;background:var(--ink-950);border:1px solid var(--line)}
.tile__tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.tile h3{margin:8px 0 6px;font-size:18px}
.tile p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-3)}
.viz-match{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 22px}
.viz-match__say{font-size:15px;color:var(--text-1)}
.viz-match__fleet{display:flex;gap:8px;flex-wrap:wrap}
.viz-match__fleet span{display:flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:10px;border:1px solid var(--line);font-size:12.5px;color:var(--text-4)}
.viz-match__fleet i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.viz-match__fleet .is-pick{color:var(--text-1);border-color:var(--green);background:rgba(110,231,183,.1);box-shadow:0 0 22px -6px var(--green)}
.viz-match__fleet .is-pick i{color:var(--green)}
.viz-match__fleet .is-alt{border-style:dashed;color:var(--text-3)}
.viz-feed{background:radial-gradient(60px 46px at 58% 56%,#fff 0,#ffd34a 22%,#f0642c 48%,transparent 72%),radial-gradient(30px 22px at 22% 30%,#f0642c,transparent 70%),radial-gradient(24px 18px at 82% 22%,#c0388c,transparent 70%),
  repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),linear-gradient(135deg,#1b0a52,#5a1a86 55%,#2a0f5e)}
.viz-feed__box{position:absolute;left:58%;top:56%;width:64px;height:54px;transform:translate(-50%,-50%);border:1.5px solid var(--coral);border-radius:2px;box-shadow:0 0 12px rgba(240,133,122,.7);animation:lockb 1.1s ease-in-out infinite alternate}
@keyframes lockb{to{width:54px;height:46px}}
.viz-feed__hud,.viz-feed__temp{position:absolute;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#fff;text-shadow:0 1px 2px #000}
.viz-feed__hud{left:10px;top:9px}.viz-feed__temp{left:calc(58% + 38px);top:calc(56% + 18px);color:var(--coral)}
.viz-talk{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 16px}
.viz-talk span{align-self:flex-start;padding:5px 11px;border-radius:12px 12px 12px 4px;font-size:12px;color:var(--text-1);background:rgba(79,209,232,.1);border:1px solid rgba(79,209,232,.25)}
.viz-talk span:nth-child(even){align-self:flex-end;border-radius:12px 12px 4px 12px}
.viz-loop{display:flex;align-items:center;gap:8px;padding:0 14px}
.viz-loop span{flex:1 1 0;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;border:1px solid var(--line);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.viz-loop b{font-family:var(--display);font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--text-1)}
.viz-loop .s{border-color:rgba(240,133,122,.4)}.viz-loop .d{border-color:rgba(79,209,232,.4)}.viz-loop .a{border-color:rgba(110,231,183,.4)}
.viz-board{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 18px;font-size:11px}
.viz-board div{display:flex;align-items:center;gap:6px}
.viz-board b{flex:0 0 52px;font-weight:600}
.viz-board span{padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--text-4);font-family:var(--mono);font-size:9.5px}
.viz-board .done{color:var(--green);border-color:rgba(110,231,183,.35)}.viz-board .done::before{content:"✓ "}
.viz-board .now{color:var(--text-1);border-color:var(--cyan);background:rgba(79,209,232,.12)}
.viz-hitl{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:0 20px;font-size:13.5px;color:var(--text-1)}
.viz-hitl div{display:flex;gap:8px}
.viz-hitl b,.viz-hitl i{padding:6px 14px;border-radius:999px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.viz-hitl b{color:var(--ink-900);background:var(--green)}.viz-hitl i{color:var(--text-3);border:1px solid var(--line)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.tile--wide{grid-column:auto}}

/* waypoint tile */
.viz-way{background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px),var(--ink-950)}
.viz-way__pin{position:absolute;left:34%;top:46%;width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(240,184,96,.18),0 0 0 14px rgba(240,184,96,.08),0 0 16px var(--amber)}
.viz-way__label{position:absolute;left:calc(34% + 22px);top:calc(46% - 6px);padding:3px 9px;border-radius:7px;font-size:11.5px;color:#fff;background:rgba(8,11,17,.8);border:1px solid rgba(240,184,96,.4)}
.viz-way__say{position:absolute;inset-inline-end:14px;bottom:14px;padding:5px 11px;border-radius:12px 12px 4px 12px;font-size:12px;color:var(--text-1);background:rgba(79,209,232,.1);border:1px solid rgba(79,209,232,.25)}

/* voice band */
.voiceband{border-block:1px solid var(--line);background:radial-gradient(60% 120% at 80% 50%,rgba(79,209,232,.09),transparent 70%),var(--ink-950)}
.voiceband__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(56px,8vw,100px)}
.voiceband__viz{display:flex;align-items:center;gap:22px}
.voiceband__orb{flex:0 0 auto;width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px;background:linear-gradient(140deg,#7fe3f4,var(--cyan) 55%,#2fa9c4);box-shadow:0 0 0 10px rgba(79,209,232,.08),0 0 0 22px rgba(79,209,232,.04),0 20px 50px -14px rgba(79,209,232,.7)}
.voiceband__orb i{width:5px;border-radius:2px;background:var(--ink-900);height:30%;animation:vb2 1.1s ease-in-out infinite}
.voiceband__orb i:nth-child(2){animation-delay:-.8s}.voiceband__orb i:nth-child(3){animation-delay:-.35s}.voiceband__orb i:nth-child(4){animation-delay:-.6s}.voiceband__orb i:nth-child(5){animation-delay:-.15s}
@keyframes vb2{0%,100%{height:18%}50%{height:52%}}
.voiceband__lines{display:flex;flex-direction:column;gap:7px;min-width:0}
.voiceband__lines p{margin:0;font-size:13.5px;line-height:1.45}
.voiceband__lines .you{color:var(--text-1)}
.voiceband__lines .aria{color:var(--green);font-family:var(--mono);font-size:11.5px}
.voiceband__lines .aria::before{content:"AIRIAL  ";color:var(--text-4);letter-spacing:.1em}
html[lang="ar"] .voiceband__lines .aria::before{content:none}
html[lang="ar"] .voiceband__lines .aria::after{content:"AIRIAL  ";color:var(--text-4);unicode-bidi:isolate;direction:ltr}
@media (max-width:820px){.voiceband__in{grid-template-columns:1fr}}

/* arrival */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sayit__mic i,.sayit__caret,.voiceband__orb i,.viz-feed__box,.show__live u{animation:none}}


/* ============================================================
   Locale selector (flag + language), top right on every page.
   ============================================================ */
.locale{position:relative;flex:0 0 auto}
.locale__btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:999px;cursor:pointer;font-family:var(--display);font-size:12px;font-weight:500;color:var(--text-2);
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.locale__btn:hover{color:var(--text-1);border-color:var(--line-hover);background:rgba(255,255,255,.07)}
.locale__flag{font-size:16px;line-height:1}
.locale__menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:90;min-width:214px;padding:6px;border-radius:14px;background:var(--ink-850);border:1px solid var(--line);box-shadow:0 24px 50px -18px rgba(0,0,0,.8)}
.locale__menu[hidden]{display:none}
.locale__opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;cursor:pointer;background:transparent;border:0;color:var(--text-2);text-align:start;font-family:var(--display)}
.locale__opt:hover{background:rgba(255,255,255,.05)}
.locale__opt.is-active{background:rgba(79,209,232,.1);color:var(--text-1)}
.locale__opt .locale__flag{font-size:22px}
.locale__names{display:flex;flex-direction:column;gap:1px}
.locale__names b{font-size:13px;font-weight:600}
.locale__names i{font-style:normal;font-size:11.5px;color:var(--text-3)}

/* ============================================================
   ARABIC + RIGHT TO LEFT.
   Layout mirrors by itself because everything above uses logical
   properties. What is left here is what a mirror cannot do:

   1. Typography. Arabic is cursive: letter-spacing tears words apart
      and there is no upper case, so both are switched off everywhere.
      It also sits taller and deeper on the line than Latin, so lines
      open up and the smallest label sizes come up to stay legible.
   2. Things that point. Arrows, chevrons, chat-bubble tails.
   3. Things that must NOT mirror. Code, telemetry, coordinates and the
      diagrams, which stay left to right inside an RTL page.
   ============================================================ */
html[lang="ar"]{--mono:"Geist Mono",var(--arabic),ui-monospace,monospace}
html[lang="ar"] *,html[lang="ar"] *::before,html[lang="ar"] *::after{letter-spacing:0!important;text-transform:none!important}
html[lang="ar"] body{line-height:1.8}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.4;font-weight:600}
html[lang="ar"] .h-hero{line-height:1.3;font-size:clamp(34px,5vw,60px)}
html[lang="ar"] .lead{line-height:1.9}
html[lang="ar"] .eyebrow{font-size:13px}
html[lang="ar"] .btn{font-family:var(--display);font-size:14px;font-weight:500}
html[lang="ar"] .nav__links a{font-family:var(--display);font-size:13.5px}
html[lang="ar"] .tile__tag,html[lang="ar"] .case__tag,html[lang="ar"] .diff__tag,html[lang="ar"] .frame__spec,html[lang="ar"] .idea__num,html[lang="ar"] .vhero__trust,html[lang="ar"] .soon-pill,html[lang="ar"] .rack__group,html[lang="ar"] .show__chrome,html[lang="ar"] .show__live{font-family:var(--display);font-size:12.5px}
html[lang="ar"] .tile p,html[lang="ar"] .case p,html[lang="ar"] .frame p,html[lang="ar"] .idea__part p{font-size:14.5px;line-height:1.85}
html[lang="ar"] .sc--plan b,html[lang="ar"] .sc--alert b,html[lang="ar"] .sc--shot span{font-family:var(--display);font-size:11.5px}
html[lang="ar"] .viz-match__fleet i,html[lang="ar"] .viz-loop span,html[lang="ar"] .viz-board span,html[lang="ar"] .viz-hitl b,html[lang="ar"] .viz-hitl i,html[lang="ar"] .sayit__out span{font-family:var(--display);font-size:11.5px}
[dir="rtl"] .idea__arrow,[dir="rtl"] .composer__send svg{transform:scaleX(-1)}
[dir="rtl"] .sc--you,[dir="rtl"] .viz-way__say{border-radius:13px 13px 13px 3px}
[dir="rtl"] .viz-talk span{border-radius:12px 12px 4px 12px}
[dir="rtl"] .viz-talk span:nth-child(even){border-radius:12px 12px 12px 4px}
/* stays left to right: instruments, code, and the diagrams */
[dir="rtl"] .viz-feed,[dir="rtl"] .viz-way,[dir="rtl"] .demo__stage,[dir="rtl"] .show__map,[dir="rtl"] pre,[dir="rtl"] code,[dir="rtl"] kbd{direction:ltr}
[dir="rtl"] .viz-way__say{inset-inline-end:auto;right:14px}


/* ============================================================
   LIGHT THEME. Applied by js/prefs.js as <html data-theme="light"> on
   the console, login and settings pages. The landing page never loads
   prefs.js: it is a dark, video-led page by design.

   Almost everything follows from the tokens. What is below them is what
   had a colour baked in: surfaces that sit on the (always dark) 3D map
   keep dark glass, translucent white fills become translucent ink.
   ============================================================ */
:root[data-theme="light"]{
  --ink-950:#e9edf2; --ink-900:#f4f6f9; --ink-850:#ffffff; --ink-800:#eef1f5; --ink-700:#dde3ea;
  --line:rgba(15,23,42,.12); --line-hover:rgba(15,23,42,.28);
  --text-1:#0b1220; --text-2:#27324a; --text-3:#56627a; --text-4:#656f83;
  --cyan:#0a7596; --cyan-dim:#0e6f85; --amber:#875309; --amber-dim:#6d4207; --green:#0c8f60; --coral:#a83828;
}
:root[data-theme="light"] body{background:var(--ink-900)}
:root[data-theme="light"] .btn{background:rgba(15,23,42,.03)}
:root[data-theme="light"] .btn:hover{background:rgba(15,23,42,.07)}
:root[data-theme="light"] .btn--solid{background:var(--text-1);color:#fff}
:root[data-theme="light"] .btn--solid:hover{background:#000}
:root[data-theme="light"] .locale__btn{background:rgba(15,23,42,.03)}
:root[data-theme="light"] .locale__btn:hover,:root[data-theme="light"] .locale__opt:hover{background:rgba(15,23,42,.06)}
:root[data-theme="light"] .locale__menu{box-shadow:0 24px 50px -18px rgba(15,23,42,.28)}
:root[data-theme="light"] ::selection{color:#fff}
/* the drawn route in the "draw it" tile: an ink line over the map grid */
.viz-way__ink{position:absolute;inset:0;width:100%;height:100%}
/* the drawn-route variant: the marker sits on the first vertex of the line, in the route's own colour */
.viz-way--draw .viz-way__pin{left:29%;top:48%;background:#84d3a6;box-shadow:0 0 0 5px rgba(132,211,166,.18),0 0 0 14px rgba(132,211,166,.07),0 0 16px rgba(132,211,166,.6)}
.viz-way--draw .viz-way__label{left:calc(29% + 20px);top:calc(48% - 10px);border-color:rgba(132,211,166,.45)}
.viz-way--draw .viz-way__say{background:rgba(132,211,166,.1);border-color:rgba(132,211,166,.3)}

/* Browser surfaces: the parts of the page nobody draws, themed so they belong to the console
   rather than to the operating system. */
:root{accent-color:var(--cyan)}
*{scrollbar-color:rgba(210,225,235,.18) transparent;scrollbar-width:thin}
::selection{text-shadow:none}
input,textarea,[contenteditable]{caret-color:var(--cyan)}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(210,225,235,.18);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(210,225,235,.32);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}
:root[data-theme="light"] *{scrollbar-color:rgba(15,23,42,.22) transparent}
:root[data-theme="light"] *::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22);background-clip:padding-box}
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.36);background-clip:padding-box}
a{text-underline-offset:2px}