/* Signal layer: shared chrome and motion. Every rule here is an enhancement;
   pages remain complete without it, without scripts and with reduced motion. */
@property --sg-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
:root {
  --sg-blue:#184af1;
  --sg-cyan:#0e8fb8;
  --sg-violet:#5b4bdb;
  --sg-ease:cubic-bezier(.2,.7,.2,1);
  --sg-hdr-bg:color-mix(in srgb,var(--bg) 88%,transparent);
}
@media(prefers-color-scheme:dark) {
  :root { --sg-blue:#8fb0ff; --sg-cyan:#6fdcf5; --sg-violet:#b3a6ff; }
}

/* Footer signature. */
.ftr { position:relative; overflow:hidden; }
.sg-wordmark { pointer-events:none; user-select:none; text-align:center; line-height:.8; margin-block:2.5rem -0.14em; font-family:'Geist Sans',system-ui,sans-serif; font-weight:500; font-size:clamp(5rem,23vw,21rem); letter-spacing:-.075em; direction:ltr; }
.sg-wordmark span { display:inline-block; color:transparent; background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 11%,transparent) 0%,color-mix(in srgb,var(--ink) 2%,transparent) 78%); -webkit-background-clip:text; background-clip:text; }
.sg-wordmark span::selection { background:none; }

@media print { .sg-wordmark { display:none; } }
@media(prefers-color-scheme:dark){.sg-wordmark span{background-image:linear-gradient(180deg,color-mix(in srgb,var(--ink) 24%,transparent) 0%,color-mix(in srgb,var(--ink) 4%,transparent) 80%)}}

/* ═══ Inner pages: the same Signal language as the homepage ═══════════ */
:root{--sg-f1:#b6cbff;--sg-f2:#bdeefa;--sg-f3:#dcd2ff;--sg-hl:#d2e0ff;--sg-hl-ink:#153aab;--sg-card:var(--panel)}
@media(prefers-color-scheme:dark){:root{--sg-f1:#1f45d8b0;--sg-f2:#0a7fa080;--sg-f3:#5a3fd080;--sg-hl:#2c4f95;--sg-hl-ink:#fff}}
@keyframes sg-spin{to{--sg-angle:360deg}}
@keyframes sg-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes sg-say{0%{background-color:transparent;box-shadow:0 0 0 .04em transparent}25%{background-color:var(--sg-hl);color:var(--sg-hl-ink);box-shadow:0 0 0 .04em var(--sg-hl)}100%{background-color:transparent;box-shadow:0 0 0 .04em transparent}}
@keyframes sg-field{to{transform:translate3d(3%,2.5%,0) scale(1.07)}}
@keyframes sg-lift{from{transform:translateY(26px) scale(.975)}to{transform:none}}

/* Luminous field behind each page opening, tinted per product. */
body:not(.cinematic-home)>main{position:relative;isolation:isolate;overflow-x:clip}
body:not(.cinematic-home)>main::before{content:'';position:absolute;z-index:-1;inset-inline:-8%;inset-block-start:-140px;height:min(1000px,125vh);pointer-events:none;background:radial-gradient(38% 46% at 16% 22%,var(--sg-f1),transparent 72%),radial-gradient(34% 42% at 86% 10%,var(--sg-f2),transparent 72%),radial-gradient(30% 40% at 58% 62%,var(--sg-f3),transparent 72%);-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);animation:sg-field 26s ease-in-out infinite alternate}
body:not(.cinematic-home)>main::after{content:'';position:absolute;z-index:-1;inset-inline:0;inset-block-start:-140px;height:820px;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 22%,#000 5%,transparent 72%);mask-image:radial-gradient(ellipse 65% 60% at 50% 22%,#000 5%,transparent 72%)}
main:has(.doc)::before{opacity:.5}
main.sg-field-off::before{animation-play-state:paused}

/* Headlines: gradient accents and the one-time spoken sweep. */
main h1 .accent{color:transparent;background:linear-gradient(100deg,var(--accent) 0%,var(--sg-cyan) 33%,var(--sg-violet) 66%,var(--accent) 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text}
.not-found h1{font-size:clamp(2.5rem,1.3rem + 2.8vw,3.9rem);letter-spacing:-.05em;line-height:1.04}
html[lang=ar] :is(.not-found) h1{letter-spacing:0;line-height:1.35}
.sg-w{border-radius:.12em}
[data-sg-speak].is-speaking .sg-w{animation:sg-say .9s var(--sg-ease) var(--d,0s) both}
[data-sg-speak].is-speaking :is(em,.accent){animation:sg-shimmer 2.6s var(--sg-ease) var(--sg-em-delay,1.2s) both}
@keyframes sg-ping-site{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}80%,100%{box-shadow:0 0 0 8px transparent}}

/* Buttons and links. */
.btn{border-radius:999px;padding-inline:1.4rem;color:#fff;background:linear-gradient(135deg,#184af1,#2f6bff 55%,#1677c9);box-shadow:0 10px 30px -14px #184af1b0,inset 0 1px 0 #ffffff40;transition:transform .35s var(--sg-ease),box-shadow .35s var(--sg-ease),filter .2s}
.btn:hover{filter:none;transform:translateY(-2px);box-shadow:0 18px 40px -16px #184af1c0,inset 0 1px 0 #ffffff50}
@media(prefers-color-scheme:dark){.btn{color:#07122c;background:linear-gradient(135deg,#a9c4ff,#8fb0ff 50%,#7fd8f0)}}
.not-found .eyebrow{display:block;font-size:clamp(6rem,4rem + 12vw,13rem);line-height:.9;letter-spacing:-.07em;font-weight:500;color:transparent;background:linear-gradient(100deg,var(--accent),var(--sg-cyan) 50%,var(--sg-violet));-webkit-background-clip:text;background-clip:text;width:fit-content}
@media(forced-colors:active){main h1 .accent,.not-found .eyebrow{color:CanvasText;background:none}}
@media(prefers-reduced-motion:reduce){
  body:not(.cinematic-home)>main::before{animation:none!important}
  .btn{transition:none}
  .btn:hover{transform:none}
}