/* hero: a framed stage with the orbit video emerging from the bottom, floating glass notes around it */
.hero{ display:block; padding-block:0 clamp(24px,4vw,48px); }
@media (min-width:1000px){ .hero{ grid-template-columns:none; } }
.stage{ --bg:#F5F0E7; --fg:#181A1C; --muted:#5F6368; --card:rgba(255,255,255,.62); --rule:rgba(24,26,28,.12); --accent:#2547D8;
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-block-size:clamp(860px,106svh,1060px);
  border-radius:28px; background:var(--bg); color:var(--fg); border:1px solid rgba(24,26,28,.06); box-shadow:0 40px 90px -50px rgba(24,26,28,.35); }
.stage__copy{ position:relative; z-index:3; display:grid; justify-items:center; text-align:center; gap:22px; padding:clamp(36px,5vw,64px) var(--pad) 0; }
.stage .hero__title{ font-size:clamp(1.9rem,3.7vw,3.4rem); line-height:1.08; max-inline-size:none; text-wrap:balance; }
:root[dir=rtl] .stage .hero__title{ font-size:clamp(1.9rem,3.9vw,3.4rem); line-height:1.35; max-inline-size:min(100%,13em); text-wrap:balance; }
.stage .hero__title em{ font-family:"Instrument Serif","Bricolage Grotesque",serif; font-style:italic; font-weight:400; font-size:1.14em; letter-spacing:-.02em; color:var(--accent); }
:root[dir=rtl] .stage .hero__title em{ font-family:inherit; font-style:normal; font-weight:inherit; font-size:1em; letter-spacing:0; }
.stage .hero__sub{ max-inline-size:62ch; margin:0; font-size:1.0625rem; }
.stage .hero__cta{ justify-content:center; }
.btn--ink{ background:#181A1C; color:#fff; } .btn--ink:hover{ background:var(--blue); }
.btn--glass{ background:rgba(255,255,255,.7); color:#181A1C; border:1px solid rgba(24,26,28,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .btn--glass:hover{ background:#fff; border-color:#181A1C; color:#181A1C; }

.stage__video{ position:absolute; z-index:1; inset-inline:0; inset-block-end:0; margin-inline:auto; inline-size:min(100%,1200px); block-size:auto; aspect-ratio:16/9; object-fit:cover; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 24%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 24%); mask-composite:intersect; }

.float{ position:absolute; z-index:2; inline-size:min(250px,22vw); padding:20px 22px; border-radius:24px; background:var(--card); border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 24px 44px -24px rgba(24,26,28,.3);
  rotate:calc(var(--r) * var(--dir) * 1deg); animation:bob 6s ease-in-out infinite alternate; }
.float--a{ --r:-7; inset-inline-start:5%; inset-block-start:41%; }
.float--b{ --r:6; inset-inline-end:5%; inset-block-start:52%; animation-delay:-3s; }
.float__t{ font-family:var(--f-display); font-weight:var(--w-d); font-size:1.0625rem; line-height:1.3; letter-spacing:var(--track); }
.float__s{ margin-block-start:8px; font-size:.875rem; color:var(--muted); line-height:1.5; }
@keyframes bob{ to{ translate:0 -12px; } }

.stage__note{ position:absolute; z-index:2; inset-block-end:clamp(20px,3vw,36px); max-inline-size:210px; font-size:.9375rem; line-height:1.5; color:var(--muted); }
.stage__note::before{ content:""; display:block; inline-size:28px; block-size:1px; background:currentColor; opacity:.5; margin-block-end:12px; }
.stage__note--a{ inset-inline-start:5%; } .stage__note--b{ inset-inline-end:5%; text-align:start; }
.badge-wrap{ position:absolute; z-index:2; inset-inline-end:5%; inset-block-start:20%; }
.badge{ animation:spin 26s linear infinite; }
.badge__ring{ font:600 9.4px var(--f-body); letter-spacing:.16em; fill:var(--fg); }
html[lang=ar] .badge__ring{ letter-spacing:0; font-size:10.5px; }
.badge__star{ fill:var(--fg); }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .stage{ min-block-size:0; }
  .float,.stage__note,.badge-wrap{ display:none; }
  .stage__video{ position:relative; inline-size:140%; max-inline-size:none; margin-inline:-20%; margin-block-start:-2%; }
}
@media (prefers-reduced-motion:reduce){ .float,.badge{ animation:none; } }
/* mobile menu panel floats over the page instead of stretching the header */
@media (max-width:1100px){ .header .wrap{ position:relative; } .mpanel{ position:absolute; inset-inline:var(--pad); inset-block-start:calc(100% + 4px); margin-block-start:0; } }

@media (max-width:420px){ .brand__txt b{ font-size:.9375rem; } .brand{ gap:6px; } .bar{ padding-inline:10px 6px; } }

/* themed hero: white stage + white-background video in light mode, #181A1C stage + dark video in dark mode */
.stage{ --bg:#FDFDFD; border-color:rgba(24,26,28,.08); }
:root[data-theme=dark] .stage{ --bg:#17191A; --fg:#FFFFFF; --muted:rgba(255,255,255,.7); --card:rgba(255,255,255,.08); --rule:rgba(255,255,255,.14); --accent:#8FA4FF; border-color:rgba(255,255,255,.1); box-shadow:none; }
:root[data-theme=dark] .stage .float{ border-color:rgba(255,255,255,.16); box-shadow:0 24px 44px -24px rgba(0,0,0,.6); }
:root[data-theme=dark] .btn--ink{ background:#fff; color:#181A1C; }
:root[data-theme=dark] .btn--ink:hover{ background:var(--blue); color:#fff; }
:root[data-theme=dark] .btn--glass{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); }
:root[data-theme=dark] .btn--glass:hover{ background:rgba(255,255,255,.2); color:#fff; border-color:#fff; }
.stage__video--dark{ display:none; }
:root[data-theme=dark] .stage__video--light{ display:none; }
:root[data-theme=dark] .stage__video--dark{ display:block; }

/* header v4: brand | glass nav pill | actions (as in the reference); the hero runs edge to edge behind the header */
@media (min-width:1101px){
  .bar{ background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; }
  .nav{ padding:4px; border-radius:999px; background:color-mix(in srgb, var(--bg) 42%, transparent); -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
    border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow:0 10px 32px -14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35); }
  .nav__pill{ inset-block:4px; }
}
.langbtn{ display:inline-flex; align-items:center; gap:8px; min-block-size:44px; padding-inline:14px; border-radius:999px; font-weight:600; font-size:.9375rem; color:var(--fg);
  border:1px solid color-mix(in srgb, var(--fg) 16%, transparent); background:color-mix(in srgb, var(--bg) 42%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:background-color .2s, color .2s, border-color .2s; }
.langbtn:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.langbtn .ico{ inline-size:18px; block-size:18px; }
@media (max-width:420px){ .langbtn__t{ display:none; } .langbtn{ padding-inline:10px; } }
.hero{ margin-block-start:calc(var(--header-h) * -1); padding-block:0; position:relative; }
.stage{ border-radius:0; border:0 !important; box-shadow:none !important; min-block-size:clamp(720px,100svh,940px); }
.stage__copy{ padding-block-start:calc(var(--header-h) + clamp(28px,4vw,56px)); }
.float--b,.badge-wrap,.stage__note--b{ inset-inline-end:8%; }
@media (max-width:900px){ .stage{ min-block-size:0; } }
@media (min-width:901px){ .stage__video{ inline-size:min(100%,1100px); inset-block-end:0; } }

/* title: always exactly two lines on desktop (explicit line split), free wrapping on small screens */
.stage .hero__title .ln{ display:block; }
:root[dir=rtl] .stage .hero__title{ max-inline-size:none; }
@media (min-width:901px){ .stage .hero__title .ln{ white-space:nowrap; } }

/* floating notes in design-system colours, with a pop-in, a pulse ring and a hover tilt */
.float{ overflow:visible; transition:rotate .45s cubic-bezier(.3,1.4,.5,1), scale .45s cubic-bezier(.3,1.4,.5,1); }
.float:hover{ rotate:0deg; scale:1.06; }
.float::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--ring); opacity:0; pointer-events:none; animation:ring 2.8s ease-out infinite; }
.float--b::after{ animation-delay:-1.4s; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.85; } 100%{ transform:scale(1.2); opacity:0; } }
.float__ico{ display:grid; place-items:center; inline-size:38px; block-size:38px; border-radius:12px; margin-block-end:12px; background:rgba(255,255,255,.18); }
.stage .float--a{ --ring:rgba(37,71,216,.6); background:var(--blue); color:#fff; border-color:rgba(255,255,255,.28); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 28px 52px -22px rgba(37,71,216,.8); }
.stage .float--a .float__s{ color:rgba(255,255,255,.85); }
.stage .float--b{ --ring:rgba(24,26,28,.45); background:#181A1C; color:#fff; border-color:rgba(255,255,255,.12); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 28px 52px -22px rgba(24,26,28,.75); }
.stage .float--b .float__s{ color:rgba(255,255,255,.74); }
:root[data-theme=dark] .stage .float--a{ --ring:rgba(143,164,255,.6); box-shadow:0 28px 52px -22px rgba(37,71,216,.9); }
:root[data-theme=dark] .stage .float--b{ --ring:rgba(255,255,255,.5); background:#fff; color:#181A1C; border-color:rgba(255,255,255,.4); box-shadow:0 28px 52px -22px rgba(0,0,0,.8); }
:root[data-theme=dark] .stage .float--b .float__s{ color:rgba(24,26,28,.72); }
:root[data-theme=dark] .stage .float--b .float__ico{ background:rgba(24,26,28,.08); }
@media (prefers-reduced-motion:reduce){ .float::after{ animation:none; } }

/* availability: the words type themselves out, hold, erase and start again, so they are noticed without hovering.
   A hidden copy of the full text keeps the pill at a fixed width so nothing shifts while typing. */
.stage .pill .pill__t{ max-inline-size:none; opacity:1; padding-inline-end:18px; transition:none; }
.stage .pill i{ margin-block:13px; margin-inline:13px 8px; }
.pill__l{ display:inline-grid; }
.pill__ghost,.pill__live{ grid-area:1/1; white-space:nowrap; }
.pill__ghost{ visibility:hidden; }
.pill__live::after{ content:""; display:inline-block; inline-size:2px; block-size:1em; margin-inline-start:2px; vertical-align:-.14em; background:currentColor; animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .pill__live::after{ animation:none; opacity:0; } }

/* (older behaviour, kept for reference) the words slide out on hover or focus (always shown on touch) */
.stage .pill{ gap:0; padding:0; overflow:visible; cursor:default; }
.stage .pill i{ margin:13px; animation:blink 1.6s ease-in-out infinite; }
.pill__t{ display:inline-block; max-inline-size:0; opacity:0; white-space:nowrap; transition:max-inline-size .5s cubic-bezier(.3,1.2,.5,1), opacity .3s, padding .5s; }
.stage .pill:hover .pill__t,.stage .pill:focus-visible .pill__t{ max-inline-size:220px; opacity:1; padding-inline-end:18px; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (hover:none){ .pill__t{ max-inline-size:220px; opacity:1; padding-inline-end:18px; } }
@media (prefers-reduced-motion:reduce){ .stage .pill i{ animation:none; } .pill__t{ transition:none; } }

/* no idle bobbing and no springy overshoot on the notes: they sit still and only react to hover */
.float{ animation:none; transition:rotate .4s cubic-bezier(.2,.7,.2,1), scale .4s cubic-bezier(.2,.7,.2,1); }

/* hero notes: no pulse ring and no glow, just flat colour cards */
.float::after{ content:none; animation:none; }
.stage .float,.stage .float--a,.stage .float--b,:root[data-theme=dark] .stage .float--a,:root[data-theme=dark] .stage .float--b{ box-shadow:none; }

/* small laptops and landscape tablets: smaller notes, lower down, no badge or side notes so nothing collides with the headline or face */
@media (min-width:901px) and (max-width:1199px){
  .float{ inline-size:190px; padding:16px 18px; }
  .float__ico{ inline-size:32px; block-size:32px; margin-block-end:8px; }
  .float__t{ font-size:.9375rem; } .float__s{ font-size:.8125rem; margin-block-start:6px; }
  .float--a{ inset-block-start:52%; inset-inline-start:3%; }
  .float--b{ inset-block-start:58%; inset-inline-end:3%; }
  .badge-wrap,.stage__note{ display:none; }
}

/* footer is black in both themes */
.contact.inv,:root[data-theme=dark] .contact.inv{ --bg:#181A1C; --fg:#FFFFFF; --card:#222528; --rule:rgba(255,255,255,.16); --muted:rgba(255,255,255,.68); --accent:#8FA4FF; }

/* header pieces float over content, so brand and theme toggle get the same glass as the nav (readable over any section) */
@media (min-width:1101px){
  .brand,.tool--icon{ background:color-mix(in srgb, var(--bg) 42%, transparent); -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
    border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow:0 10px 32px -14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35); }
  .brand{ padding-block:5px; padding-inline:5px 18px; border-radius:999px; }
  .tool--icon{ border-radius:50%; }
}

/* tablets and phones: the video sits closer to the buttons (its empty top is pulled up under them) */
@media (max-width:900px){ .stage__video{ margin-block-start:-14%; } }
.pill__ghost::after{ content:""; display:inline-block; inline-size:2px; margin-inline-start:2px; }
/* hug: the tag follows the typed text instead of reserving the full width */
.pill__ghost{ display:none; }
.pill__l{ display:inline; }