/* ===== Astra redesign — shared base (fonts, reset, scenes, chat, review switcher) ===== */
@font-face{font-family:"Somar";src:url("../fonts/somar-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Somar";src:url("../fonts/somar-semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Somar";src:url("../fonts/somar-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --indigo:#2A2A86; --indigo-900:#1D1D5D; --ground:#17174A; --night:#0D0D2E;
  --turq:#40C8F4; --turq-300:#78D8F7; --turq-800:#0A80A6; --trail:#0077C1;
  --paper:#EEEFF4; --ink:#1D1D5D; --body:#505062; --mut:#A2A2B3;
  --ok:#22C55E; --warn:#F59E0B;
  --radd-a:#1C2372; --radd-b:#1FC8F2;
  --font:"Somar",system-ui,-apple-system,"Segoe UI","Noto Sans Arabic",sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ico{width:1.25em;height:1.25em;flex:none}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
:focus-visible{outline:3px solid var(--turq);outline-offset:3px;border-radius:8px}
.skip{position:fixed;top:-60px;right:16px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* reveal-on-scroll (only when JS is running, so content is never hidden without it) */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="scale"]{transform:scale(.96)}
.js [data-reveal].in{opacity:1;transform:none}

/* brand photo grade — makes mixed stock photos look like one set */
.grade{position:relative;overflow:hidden;isolation:isolate}
.grade>img{width:100%;height:100%;object-fit:cover}
.grade::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(42,42,134,.55),rgba(0,119,193,.25) 55%,rgba(64,200,244,.18));mix-blend-mode:multiply;pointer-events:none;transition:opacity .5s}

/* ===== animated scenes (colours come from CSS variables set by each concept) ===== */
.scene{width:100%;height:auto;overflow:visible;font-family:var(--font)}
.scene .sc-hill1{fill:var(--sc-hill1,#1D1D5D)}
.scene .sc-hill2{fill:var(--sc-hill2,#2A2A86)}
.scene .sc-tower{stroke:var(--sc-line,#fff);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scene .sc-tower--far{opacity:.7;stroke-width:2}
.scene .sc-brace{stroke-width:1.4;opacity:.75}
.scene .sc-sector{fill:var(--sc-line,#fff);stroke:none}
.scene .sc-dish{fill:var(--sc-dish,#fff);stroke:none}
.scene .sc-beacon{fill:#FF5A5F;stroke:none;animation:sc-blink 1.6s steps(2,end) infinite}
.scene .sc-rings circle{fill:none;stroke:var(--sc-accent,#40C8F4);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:sc-ring 3s var(--ease-out) infinite;opacity:0}
.scene .sc-rings circle:nth-child(2){animation-delay:1s}
.scene .sc-rings circle:nth-child(3){animation-delay:2s}
.scene .sc-beams path{fill:none;stroke:var(--sc-accent,#40C8F4);stroke-width:1.6;stroke-dasharray:3 7;opacity:.55;animation:sc-dash 1.2s linear infinite}
.scene .sc-pkts circle{fill:var(--sc-pkt,#fff)}
.scene .sc-pkt--back{fill:var(--sc-accent,#40C8F4)}
.scene .sc-house__body{fill:var(--sc-house,#2A2A86)}
.scene .sc-win{fill:var(--sc-win,#FFD27A);animation:sc-win 5s ease-in-out infinite}
.scene .sc-win--b{animation-delay:-2.5s}
.scene .sc-mast{stroke:var(--sc-line,#fff);stroke-width:1.6}
.scene .sc-cpe{fill:var(--sc-dish,#fff)}
.scene .sc-lbl{fill:var(--sc-text,#fff);font-size:22px;font-weight:700}
.scene .sc-lbl--s{font-size:18px;font-weight:600;opacity:.95}
/* fibre */
.scene .sc-noc__box{fill:var(--sc-house,#1D1D5D);stroke:var(--sc-accent,#40C8F4);stroke-opacity:.35}
.scene .sc-noc__unit{fill:var(--sc-unit,rgba(255,255,255,.08))}
.scene .sc-led{fill:var(--ok);animation:sc-blink 1.1s steps(2,end) infinite}
.scene .sc-led--2{fill:var(--sc-accent,#40C8F4);animation-duration:.7s}
.scene .sc-led--3{animation-duration:1.7s}
.scene .sc-fibers path{fill:none;stroke:var(--sc-fiber,rgba(120,216,247,.28));stroke-width:3;stroke-linecap:round}
.scene .sc-fibers path:first-child{stroke-width:5}
.scene .sc-pulses path{fill:none;stroke:var(--sc-light,#9BE8FF);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:14 86;stroke-dashoffset:100;animation:sc-pulse 2.4s linear infinite}
.scene .sc-pulses .p0{stroke-width:5;stroke-dasharray:18 82;animation-duration:1.4s}
.scene .sc-pulses .p1{animation-delay:.2s}.scene .sc-pulses .p2{animation-delay:.7s}
.scene .sc-pulses .p3{animation-delay:1.1s}.scene .sc-pulses .p4{animation-delay:1.6s}
.scene .sc-split circle{fill:var(--sc-house,#1D1D5D);stroke:var(--sc-accent,#40C8F4);stroke-width:2.4}
.scene .sc-split .sc-split__core{fill:var(--sc-accent,#40C8F4);stroke:none;animation:sc-breathe 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.scene .sc-ont{fill:var(--sc-ont,#fff)}
.scene .sc-ont__led{fill:var(--ok);animation:sc-blink 1.3s steps(2,end) infinite}
.scene .sc-ont__led.d2{animation-delay:.3s}.scene .sc-ont__led.d3{animation-delay:.6s}.scene .sc-ont__led.d4{animation-delay:.9s}
@keyframes sc-ring{0%{transform:scale(.35);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes sc-dash{to{stroke-dashoffset:-20}}
@keyframes sc-blink{50%{opacity:.25}}
@keyframes sc-win{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes sc-pulse{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes sc-breathe{50%{transform:scale(1.5)}}

/* ===== chat simulation (Raddai) ===== */
.chat{display:flex;flex-direction:column;gap:8px;overflow:hidden}
.msg{max-width:86%;padding:9px 13px 7px;border-radius:14px;font-size:16.5px;line-height:1.6;position:relative;animation:msg-in .45s var(--ease-out) both}
.msg p{margin:0}
.msg__meta{display:block;font-size:13px;opacity:.6;margin-top:2px;text-align:left}
/* physical lanes like the RaddAI app: customer on the left, team on the right (pages are RTL, so flex-end = left) */
.msg--in{align-self:flex-end;background:#fff;color:#1b1f3b;border-top-left-radius:4px}
.msg--out{align-self:flex-start;background:#D6F3FF;color:#0f2a3a;border-top-right-radius:4px}
.msg--ai{align-self:flex-start;background:linear-gradient(135deg,#EEE9FF,#E3F6FF);color:#2b2270;border:1px dashed rgba(91,70,229,.45)}
.msg__tag{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;color:#5B46E5;margin-bottom:2px}
.msg__tag .ico{width:13px;height:13px}
.msg--sys{align-self:center;background:rgba(0,0,0,.18);color:#fff;font-size:14px;padding:4px 12px;border-radius:999px;max-width:95%;text-align:center}
.typing{align-self:flex-end;display:flex;gap:4px;padding:10px 12px;background:#fff;border-radius:14px;border-top-left-radius:4px;animation:msg-in .3s var(--ease-out) both}
.typing.out{align-self:flex-start;background:#D6F3FF;border-top-left-radius:14px;border-top-right-radius:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#8a90a8;animation:typing 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes msg-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ===== review switcher (only for the proposal, not part of the final site) ===== */
.cswitch{position:fixed;inset-inline:0;bottom:14px;margin-inline:auto;width:max-content;max-width:calc(100% - 24px);z-index:150;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(13,13,46,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);font-size:14px;overflow-x:auto;scrollbar-width:none}
.cswitch a{color:#cfd3ff;padding:7px 13px;border-radius:999px;white-space:nowrap;font-weight:600;transition:background .2s,color .2s}
.cswitch a:hover{background:rgba(255,255,255,.1);color:#fff}
.cswitch a[aria-current="page"]{background:var(--turq);color:#0D0D2E}
.cswitch .cs-label{color:#8d92c9;padding:7px 8px 7px 4px;white-space:nowrap}
@media (max-width:560px){.cswitch .cs-label{display:none}.cswitch a{padding:7px 10px}}

/* toast for demo-only forms */
.toast{position:fixed;inset-inline:0;bottom:74px;margin-inline:auto;width:max-content;max-width:calc(100% - 32px);z-index:160;background:#fff;color:#1D1D5D;padding:12px 18px;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);font-weight:600;font-size:16.5px;opacity:0;transform:translateY(10px);transition:.35s var(--ease-out);pointer-events:none}
.toast.show{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .scene .sc-rings circle{opacity:.35;transform:scale(1.6)}
  .scene .sc-pulses path{stroke-dashoffset:50}
}
.in-frame .cswitch{display:none}

/* LTR pages (English): same physical chat lanes as the RaddAI app — customer left, team right */
[dir=ltr] .msg--in,[dir=ltr] .typing{align-self:flex-start}
[dir=ltr] .msg--out,[dir=ltr] .msg--ai,[dir=ltr] .typing.out{align-self:flex-end}