/* ===== Shahin's — motion layer (progressive enhancement) =====
   Spine, 13 Oct 2026: drifting gold orbs, grain, floating particles (assets/fx-bg.js), cursor glow, card glow that
   follows the pointer, scroll-in reveals and count-up numbers. One curve, cubic-bezier(0.23,1,0.32,1); a press is
   scale(.97) over 160ms; hover effects only where (hover:hover) and (pointer:fine); only transform and opacity move;
   with reduced motion nothing moves and nothing stays hidden. Reveals and particles run on the home and reading
   pages only (assets/fx.js decides), never on the Score, the Cost Model, checkout, the account or forms. */

/* ---------- ambient backdrop: orbs, grain, particles ---------- */
#fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#fx-bg canvas{position:absolute;top:0;left:0;display:block}
#fx-bg .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;mix-blend-mode:var(--orbmix,screen);will-change:transform}
#fx-bg .orb.a{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(201,162,75,.42),transparent 70%)}
#fx-bg .orb.b{width:640px;height:640px;right:-220px;top:18vh;background:radial-gradient(circle,rgba(160,127,51,.32),transparent 70%)}
#fx-bg .orb.c{width:420px;height:420px;left:35vw;bottom:-200px;background:radial-gradient(circle,rgba(224,190,106,.22),transparent 70%)}
@keyframes fxOrb{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-4vh,0) scale(1.12)}100%{transform:translate3d(-4vw,5vh,0) scale(.94)}}
#fx-bg .grain{position:absolute;inset:-50%;width:200%;height:200%;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes fxGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
#root{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  #fx-bg .orb{animation:fxOrb 26s ease-in-out infinite alternate}
  #fx-bg .orb.b{animation-delay:-9s;animation-duration:34s}
  #fx-bg .orb.c{animation-delay:-17s;animation-duration:30s}
  #fx-bg .grain{animation:fxGrain 1.2s steps(6) infinite}
}

/* ---------- cursor glow ---------- */
#fx-cursor{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(201,162,75,.16),rgba(201,162,75,.05) 40%,transparent 70%);mix-blend-mode:var(--orbmix,screen);transform:translate3d(-999px,-999px,0);opacity:0;transition:opacity 400ms ease;will-change:transform}
#fx-cursor.live{opacity:1}

/* ---------- card glow that follows the pointer, gold edge-light on hover ---------- */
.card,a.tile{position:relative}
.card::after,a.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(224,190,106,.18),transparent 45%);opacity:0;transition:opacity 350ms ease}
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.card::before,a.tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--fx-a),transparent 0 70%,rgba(224,190,106,.95) 82%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 350ms ease}
@keyframes fxSweep{to{--fx-a:360deg}}
@media (hover:hover) and (pointer:fine){
  .card:hover,a.tile:hover{border-color:rgba(201,162,75,.65)}
  .card:hover::after,.card:hover::before,a.tile:hover::after,a.tile:hover::before{opacity:1}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card:hover::before,a.tile:hover::before{animation:fxSweep 2.4s linear infinite}
}

/* ---------- scroll-in reveals: .fx-on (fx.js) plays a short rise as an element scrolls in. Nothing is hidden at rest:
   the rise only starts transparent (backwards fill) and ends fully visible, so a failed script leaves content readable. */
@keyframes fxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fxBar{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:no-preference){
  .fx-on{animation:fxUp 700ms cubic-bezier(0.23,1,0.32,1) backwards;animation-delay:calc(var(--fx-i,0) * 70ms)}
  .barred.fx-on::after,.fx-on .barred::after{transform-origin:left center;animation:fxBar 800ms cubic-bezier(0.23,1,0.32,1) 300ms backwards}
}

/* ---------- buttons: a press, and a gold lift on hover ---------- */
.btn{transition:transform 160ms cubic-bezier(0.23,1,0.32,1),box-shadow 200ms ease,background-color 180ms ease,border-color 180ms ease,color 180ms ease}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover{box-shadow:0 14px 34px -10px rgba(201,162,75,.7)}
}

/* ---------- page entrance ---------- */
/* Fades start at .01, not 0: browsers skip fully transparent first paints when picking the Largest Contentful Paint. */
@media (prefers-reduced-motion:no-preference){
  #root>*{animation:fxPage 260ms ease both}
}
/* html.fx-pre (assets/app-start.js): the pre-rendered page is already on screen, so it does not fade in again */
.fx-pre #root>*,.fx-pre .rise{animation:none}
@keyframes fxPage{0%{opacity:.01}100%{opacity:1}}

/* ---------- phones and touch screens: no cursor glow, softer orbs ---------- */
@media (hover:none),(max-width:760px){#fx-cursor{display:none}#fx-bg .orb{filter:blur(60px);opacity:.3}}
@media (prefers-reduced-motion:reduce){#fx-bg canvas,#fx-bg .grain,#fx-cursor{display:none}}

/* ---------- Moyasar form on either ground ---------- */
div#mysr{color:var(--cream)!important;font-family:var(--f-display)}
div#mysr>div{max-width:none!important;color:var(--cream)!important}
div#mysr .text-black\/90,div#mysr .text-neutral-800\/90,div#mysr .text-xs.font-medium{color:var(--cream-dim)!important}
div#mysr .flex.items-end.justify-between{letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;color:var(--cream-dim)!important}
div#mysr input{background:var(--ink-900)!important;color:var(--cream)!important;box-shadow:0 0 0 1px var(--ink-600)!important;font-family:var(--f-edit);font-size:1rem!important}
div#mysr input:focus{box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(201,162,75,.15)!important}
div#mysr input::placeholder{color:var(--fieldph)!important;opacity:1!important;font-style:italic}
div#mysr input{color:var(--fieldtx)!important;-webkit-text-fill-color:var(--fieldtx);font-weight:500}
div#mysr button.bg-primary{background:var(--gold)!important;color:var(--ongold)!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius)!important;transition:background .18s,box-shadow .3s}
div#mysr button.bg-primary:hover{background:var(--gold-hi)!important;box-shadow:0 14px 34px -10px rgba(224,190,106,.75)}
div#mysr button.bg-stc{border-radius:var(--radius)!important}
div#mysr hr,div#mysr .border{border-color:var(--line)!important}
div#mysr .text-red-600,div#mysr .text-error{color:var(--bad)!important}
div#mysr .bg-red-100{background:rgba(196,106,90,.12)!important}
div#mysr img{filter:none}


/* ---------- grid filler: "and more" card that closes an unfinished row ---------- */
.fx-fill{position:relative;overflow:hidden;display:grid;gap:var(--s2);align-content:end;padding:var(--s5);min-height:100%;isolation:isolate;animation:fxFillIn .9s cubic-bezier(.2,.7,.2,1) both}
.fx-fill-tile{background:
  radial-gradient(120% 90% at 100% 0%,rgba(201,162,75,.12),transparent 60%),
  repeating-linear-gradient(135deg,rgba(237,232,220,.028) 0 1px,transparent 1px 14px),
  var(--ink-900)}
.fx-fill-card{background:
  radial-gradient(120% 90% at 100% 0%,rgba(201,162,75,.1),transparent 60%),
  repeating-linear-gradient(135deg,rgba(237,232,220,.028) 0 1px,transparent 1px 14px),
  var(--ink-800);border:1px dashed var(--line-gold);border-radius:var(--radius)}
.fx-fill .micro{color:var(--goldtx)}
.fx-fill h3{color:var(--cream)}
.fx-fill .q{font-style:italic;color:var(--cream-dim);max-width:44ch;margin:0}
.fx-fill-link{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:var(--s2);text-decoration:none}
.fx-fill:hover .fx-fill-link:after{transform:translate(4px)}
.fx-fill:hover .fx-fill-art i{border-color:rgba(224,190,106,.45)}
/* wide filler: copy left, orbit art right */
.fx-fill-wide{padding-right:calc(var(--s5) + 220px)}
.fx-fill-art{position:absolute;z-index:-1;right:-40px;top:50%;width:260px;height:260px;transform:translateY(-50%);pointer-events:none}
.fx-fill:not(.fx-fill-wide) .fx-fill-art{right:-90px;top:-60px;transform:none;opacity:.55}
.fx-fill-art i{position:absolute;inset:0;border:1px solid rgba(201,162,75,.22);border-radius:50%;transition:border-color .3s}
.fx-fill-art i:nth-child(2){inset:40px;border-style:dashed;animation:fxSpin 38s linear infinite}
.fx-fill-art i:nth-child(3){inset:88px;background:radial-gradient(circle,rgba(224,190,106,.35),transparent 70%);border-color:rgba(224,190,106,.4)}
.fx-fill-art i:nth-child(1)::after,.fx-fill-art i:nth-child(2)::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 12px var(--gold-hi);top:-3px;left:calc(50% - 3px)}
.fx-fill-art i:nth-child(1){animation:fxSpin 24s linear infinite reverse}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxFillIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@media (max-width:760px){.fx-fill-wide{padding-right:var(--s5)}.fx-fill-wide .fx-fill-art{opacity:.4}}
@media (prefers-reduced-motion:reduce){.fx-fill,.fx-fill-art i{animation:none}}


/* ---------- footer: Verified business block (SBC seal) ---------- */
/* Saudi Business Center seal: do not move, lazy-load or remove these hosts.
   Card markup and look as before. The seal iframe itself is not inside the card: seal.js appends it to <body> once and
   it is never moved (a moved iframe reloads); assets/sbc-seal.js sets --sbc-left/--sbc-top so it sits in .sbc-slot. */
.footer .sbc-block{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer .sbc-label{font-family:Archivo,var(--f-display),sans-serif;font-weight:600;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#C9A24B}
.footer .sbc-card{display:inline-block;background:#EDE8DC;border:1px solid #C9A24B;border-radius:2px;padding:12px;line-height:0}
.footer .sbc-slot{position:relative;width:130px;height:44px}
.footer .sbc-verify-seal{position:absolute;inset:0}
/* the seal iframe grows to show its verification card on hover; sbc-seal.js anchors it to the slot's bottom so it opens upward over the footer */
iframe.sbc-seal-frame{position:absolute !important;top:var(--sbc-top,0px) !important;left:var(--sbc-left,0px) !important;right:auto !important;bottom:auto !important;max-width:none !important;transition:filter .2s ease !important;z-index:60 !important;display:block;border:0;background:transparent;color-scheme:light;filter:grayscale(1) sepia(.45) contrast(1.08) brightness(.98)}
iframe.sbc-seal-frame:hover{filter:none}
/* until placed over a footer card (or with no card on screen) it is not shown, so it never floats */
iframe.sbc-seal-frame:not(.sbc-placed),.sbc-fallback-on iframe.sbc-seal-frame{visibility:hidden}
.footer .sbc-cr{font-family:Spectral,var(--f-serif,serif),serif;font-size:14px;color:#A8A296;margin:0;line-height:1.5}
/* Fallback in the seal's place (same slot, same card) if the seal has not loaded after 5 s */
.sbc-fallback{display:flex;visibility:hidden;position:absolute;top:var(--sbc-top,0px);left:var(--sbc-left,0px);z-index:60;width:130px;height:44px;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:1px;text-align:center;text-decoration:none;font-family:Archivo,var(--f-display),sans-serif;line-height:1.15;color:#19191C}
.sbc-fallback-on .sbc-fallback.sbc-placed{visibility:visible}
.sbc-fallback .sbc-fb-label{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5E594F}
.sbc-fallback .sbc-fb-no{font-size:14px;font-weight:700;letter-spacing:.04em}
.sbc-fallback .sbc-fb-verify{font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A07F33}
.sbc-fallback:hover .sbc-fb-verify,.sbc-fallback:focus-visible .sbc-fb-verify{color:#19191C;text-decoration:underline}
.sbc-fallback:focus-visible{outline:2px solid #C9A24B;outline-offset:3px}
/* ↗ and © are interface glyphs here: text form only, never colour emoji (U+FE0E follows each in the markup) */
.sbc-fallback,.sbc-fallback .sbc-fb-verify,.micro{font-variant-emoji:text}


/* ---------- form fields: typed text, example text and labels on either ground ---------- */
.input,select.input,textarea.input{color:var(--fieldtx);-webkit-text-fill-color:var(--fieldtx);caret-color:var(--goldtx-hi);font-weight:500;background-color:var(--ink-800);border-color:var(--fieldline)}
.input:hover{border-color:var(--fieldline-hi)}
.input:focus{border-color:var(--gold);background-color:var(--ink-900);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.input::placeholder{color:var(--fieldph);-webkit-text-fill-color:var(--fieldph);opacity:1;font-weight:400;font-style:italic}
.input::-webkit-input-placeholder{color:var(--fieldph);opacity:1}
.input::-moz-placeholder{color:var(--fieldph);opacity:1}
select.input option{background:var(--ink-800);color:var(--fieldtx)}
.input:disabled,.input[readonly]{color:var(--cream-dim);-webkit-text-fill-color:var(--cream-dim);opacity:1}
.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus{-webkit-text-fill-color:var(--fieldtx);-webkit-box-shadow:0 0 0 1000px var(--ink-800) inset;caret-color:var(--goldtx-hi);transition:background-color 9999s ease-in-out 0s}
.field label,label{color:var(--labeltx)}

/* ---------- fit every screen: no sideways scroll ---------- */
/* keep phones from auto-inflating text, and never let a wide element push the page sideways */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
/* phones and small tablets: headline, eyebrow and long words wrap inside the screen */
@media(max-width:600px){
  .hero h1{overflow-wrap:break-word}
  h1,h2,h3,.lede,.prose,p{overflow-wrap:break-word}
  .hero .row .btn{flex:1 1 auto;justify-content:center;text-align:center}
}