/* V395 — the front page as a lit room. One warm light falls across a
   warm-black stage, the phone is a dark metal object that throws that light, the live price is the brightest thing
   on screen when it is live, and the headline is large and light. Words, facts, ids and behaviour are unchanged:
   decoration only. This block sits in <head> so the welcome paints finished on its first frame with no splash in
   front of it (V265); selectors start with "html" so they outrank the older welcome rules further down (V209/V283).
   Pure CSS and one data: SVG for grain: no image, no web font, no new host. Every animation is declared only for
   phones that allow motion, and the still frame is the finished picture. The portal's twin is in portal.html. */
@font-face{font-family:"Inter Local";src:local("Arial"),local("Roboto");size-adjust:107.1%;ascent-override:90.4%;descent-override:22.5%;line-gap-override:0%}
:root{
  --lt-ink:#0D0A07;                                  /* warm black: even the darkest pixel is warm */
  --lt-ivory:#F4EEE3;--lt-muted:rgba(244,238,227,.68);--lt-champagne:#C9B38C;--lt-tab:#A39A8C;
  --lt-l1:214,154,62;--lt-l2:171,118,44;--lt-l3:118,80,26;   /* the light: our brass, then two darker steps of it */
  --lt-sans:Inter,"Inter Local",system-ui,sans-serif;
  --lt-sans-ar:"Noto Sans Arabic",Inter,Tahoma,system-ui,sans-serif;
  --lt-metal:linear-gradient(180deg,#F3CF86 0%,#E2AA55 46%,#C4893A 100%);
  --lt-metal-sh:inset 0 1px 0 rgba(255,246,222,.7),inset 0 -1px 0 rgba(90,55,15,.35),0 2px 6px rgba(0,0,0,.45),0 12px 30px -10px rgba(214,154,62,.62);
  --lt-foil:linear-gradient(100deg,#C68B3C 0%,#E9B865 30%,#F6D594 50%,#E3AC57 70%,#BE843A 100%);
  --lt-glint:linear-gradient(100deg,transparent 42%,rgba(255,246,222,.9) 50%,transparent 58%);
  --lt-rim:linear-gradient(150deg,#9A7E52 0%,#2E2921 16%,#141417 48%,#2B261F 80%,#A4834F 100%);
  --lt-glass:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  --lt-glass-sh:inset 0 1px 0 rgba(255,236,200,.08),inset 0 0 0 1px rgba(255,255,255,.045);
  --lt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lt-kx:86%;                                       /* where the key light comes from; mirrored in Arabic */
}
html[dir=rtl]{--lt-kx:14%}

/* No splash in front of the welcome (V265): on the home address the page itself is the first thing on screen.
   Other addresses keep it until their own look moves into <head>; a browser without :has() keeps it, as before. */
html:not(.deep-link) body:has(>#appHome:not([style*="none"])) #appSplash{display:none!important}
/* the old floating WhatsApp button waits for the bar on phones (appbar.js hides it there), at most until app-ready */
@media (max-width:900px){html:not(.app-ready) #whatsappFloat{visibility:hidden!important}}

/* ---- the stage ---- */
html #appHome{position:relative;isolation:isolate;
  background:linear-gradient(180deg,var(--bg) 0,var(--lt-ink) 120px,var(--lt-ink) calc(100% - 120px),var(--bg) 100%)}
html #appHome::before,html #appHome::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
html #appHome::before{background:
  radial-gradient(62% 300px at var(--lt-kx) 0,rgba(var(--lt-l1),.14),transparent 72%),
  radial-gradient(min(620px,150vw) min(560px,130vw) at 50% 560px,rgba(var(--lt-l1),.24) 0%,rgba(var(--lt-l2),.12) 30%,rgba(var(--lt-l3),.05) 56%,transparent 78%),
  radial-gradient(150% 100% at 50% 38%,transparent 58%,rgba(0,0,0,.45) 100%)}
html #appHome::after{background:var(--lt-grain) 0 0/160px 160px}

/* ---- the words: large and light ---- */
html #appHome .app-home-intro{max-width:640px;margin:2px auto 16px;text-align:start}
html #appHome .app-home-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 10.5px/1.4 var(--lt-sans);letter-spacing:.18em;color:var(--lt-champagne)}
html #appHome .app-home-eyebrow::before{content:"";flex:none;width:22px;height:1px;background:linear-gradient(90deg,rgba(var(--lt-l1),0),rgba(var(--lt-l1),.9))}
html #appHome .app-home-intro h1{margin:12px 0 0;font-family:var(--lt-sans);font-weight:500;font-size:clamp(28px,7.8vw,56px);line-height:1.06;letter-spacing:-.032em;color:var(--lt-ivory);text-wrap:balance;overflow-wrap:break-word}
html #appHome .app-home-intro h1 .h-gold{display:block;margin-top:.02em;color:#E2AE5C}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html #appHome .app-home-intro h1 .h-gold{background-image:var(--lt-glint),var(--lt-foil);background-size:250% 100%,100% 100%;background-position:0 0,0 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.1em;margin-bottom:-.1em}
  html[dir=rtl] #appHome .app-home-intro h1 .h-gold{background-position:100% 0,0 0;padding-bottom:.18em;margin-bottom:-.18em}
}
html #appHome .app-home-intro p{margin:12px 0 0;max-width:36ch;font-family:var(--lt-sans);font-size:15.5px;line-height:1.5;color:var(--lt-muted)}

/* ---- the phone: dark titanium lit at two corners; its last shadow is the light it throws. The server's first frame
   opens at the drawn card's height with the weekly forecast in it (about 770 px), and while the forecast is on its way
   its place is held, so the buttons below do not jump; once drawn, the card is as tall as what is in it ---- */
html #appHome .card.pulse{position:relative;overflow:hidden;max-width:340px;min-height:770px;margin:0 auto;padding:26px 18px 16px;border:1.5px solid transparent;border-radius:42px;color:var(--lt-ivory);
  background:radial-gradient(120% 46% at 50% -6%,rgba(var(--lt-l1),.08),transparent 62%) padding-box,linear-gradient(180deg,#0B0A08,#050505 62%) padding-box,var(--lt-rim) border-box;
  box-shadow:inset 0 1px 0 rgba(255,236,200,.09),inset 0 0 0 1px rgba(0,0,0,.6),0 1px 1px rgba(0,0,0,.55),0 12px 24px -8px rgba(0,0,0,.65),0 40px 80px -24px rgba(0,0,0,.8),0 30px 110px -20px rgba(var(--lt-l1),.32)}
html #appHome .card.pulse::before{content:"";position:absolute;top:11px;left:50%;width:68px;height:6px;margin-left:-34px;border-radius:4px;background:#000;box-shadow:inset 0 0 0 1px rgba(226,180,104,.16)}
html #appHome .card.pulse::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,240,210,.07) 50%,transparent 100%);transform:translateX(-110%)}
html[dir=rtl] #appHome .card.pulse::after{left:auto;right:0;transform:translateX(110%)}

/* inside the phone — the card is redrawn every 20 s, so everything here is by class, never by DOM; the first group
   is the server's first frame (before the script draws it), the rest the drawn card */
html #sitePulse .pl-top{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;margin-top:4px}
html #sitePulse .pl-live{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;font:700 10.5px var(--mono);white-space:nowrap}
html #sitePulse .pl-live i{position:relative;width:8px;height:8px;border-radius:50%}
html #sitePulse .pl-live.fd-nl{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#A8ACB5;letter-spacing:.06em}
html #sitePulse .pl-live.fd-nl i{background:#8A8F9A}
html[dir=rtl] #sitePulse .pl-live{letter-spacing:0}
html #sitePulse .pl-sym{font:600 11.5px var(--mono);letter-spacing:.04em;color:var(--lt-tab)}
html #sitePulse .pl-tabs{display:flex;justify-content:center;gap:2px;width:max-content;max-width:100%;margin:0;padding:2px;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
html #sitePulse .pl-chart+.pl-tabs{margin:4px auto 10px}
html #sitePulse .pl-tabs button{position:relative;min-height:30px;padding:6px 13px;border:0;border-radius:999px;background:none;color:var(--lt-tab);font:500 12.5px var(--lt-sans);cursor:pointer}
html #sitePulse .pl-tabs button::before{content:"";position:absolute;inset:-7px 0}   /* a 44 px tap target, drawn at 30 */
html #sitePulse .pl-tabs button[aria-pressed="true"]{color:var(--lt-ivory);background:linear-gradient(180deg,rgba(255,228,184,.15),rgba(255,228,184,.05));box-shadow:inset 0 1px 0 rgba(255,236,200,.16),inset 0 0 0 1px rgba(226,180,104,.32)}
html #sitePulse .pl-name{margin-top:12px;font-size:14px;color:var(--lt-muted)}
html #sitePulse .pl-name b{color:var(--lt-ivory);font-weight:600}
html #sitePulse .pl-price{margin-top:4px;font:700 34px/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#FFF8EC;transition:color .6s}
html #sitePulse .pl-price.flash-up{color:#3FBF7F}
html #sitePulse .pl-price.flash-down{color:#E0604F}
html #sitePulse .pl-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
html #sitePulse .pl-facts span{padding:8px 13px;border:0;border-radius:999px;background:var(--lt-glass);box-shadow:var(--lt-glass-sh);font-size:12.5px;color:var(--lt-muted)}
html #sitePulse .pl-facts b{color:#F0C27A;font-weight:700}
html #sitePulse .pl-go{display:block;width:100%;margin-top:18px;padding:15px;border:0;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,154,62,.55);color:var(--lt-ivory);font:600 15px var(--lt-sans);cursor:pointer}
html #sitePulse .pl-risk{margin:10px 0 0;font-size:11.5px;color:var(--lt-muted);text-align:center}
/* the "now" dot: no square glow; the brightest pixel on the page only while the feed says LIVE */
html #sitePulse .pl-chart svg>circle{filter:none}
html #sitePulse:has(.pl-live:not(.fd-nl):not(.fd-dl)) .pl-chart svg>circle{fill:#FFF1D2;stroke:rgba(232,176,75,.32);stroke-width:9;paint-order:stroke}
html #sitePulse .pl-list{display:grid;gap:4px}
html #sitePulse .pl-row{min-height:48px;padding:7px 8px;padding-inline-start:12px;border:0;border-radius:16px;background:var(--lt-glass);box-shadow:var(--lt-glass-sh)}
html #sitePulse .pl-row small{color:rgba(240,194,122,.85)}
html #sitePulse .pl-pill{min-width:66px;border-radius:999px}
html #sitePulse .pl-fc{border-radius:16px;border-color:rgba(226,180,104,.34)}
html #appHome .card.pulse.pl-drawn{min-height:0}
html #sitePulse .pl-fc-wait{min-height:179px;visibility:hidden}
html #sitePulse .pl-news{border-radius:14px}

/* ---- one gold button; the other is a hairline twin of the same size ---- */
html #appHome .wel-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:22px auto 12px}
html #appHome .wel-cta>*{display:flex;align-items:center;justify-content:center;height:58px;border:0;border-radius:999px;font:600 16.5px/1 var(--lt-sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html #appHome .wel-up{color:#1A1206;background:var(--lt-metal);box-shadow:var(--lt-metal-sh)}
html #appHome .wel-in{color:var(--lt-ivory);background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1.5px rgba(214,154,62,.62),inset 0 1px 0 rgba(255,236,200,.08)}
/* V414: four facts under the buttons — 0 fees, live support, market updates, news (glass tiles, gold icons, like the game card) */
html #appHome .home-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:460px;margin:0 auto 10px}
html #appHome .hf{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 12px;border-radius:16px;color:inherit;text-decoration:none;background:var(--lt-glass);box-shadow:var(--lt-glass-sh);-webkit-tap-highlight-color:transparent}
html #appHome .hf>i{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(214,154,62,.12);box-shadow:inset 0 0 0 1px rgba(226,180,104,.22)}
html #appHome .hf>i svg{width:20px;height:20px;fill:none;stroke:#E2AA55;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html #appHome .hf b{font-size:14px;font-weight:650;line-height:1.2}
html #appHome .hf small{font-size:11.5px;opacity:.7;line-height:1.25}
/* the Chart Challenge link stays where it is (V293) and steps back: glass, and no second solid gold button */
html #appHome .gcard.home-game{display:flex;align-items:center;gap:14px;max-width:460px;margin:8px auto 12px;padding:13px 14px;border:0;border-radius:20px;color:inherit;text-decoration:none;background:var(--lt-glass);box-shadow:var(--lt-glass-sh)}
html #appHome .gcard>i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(214,154,62,.12);box-shadow:inset 0 0 0 1px rgba(226,180,104,.22);font-style:normal}
html #appHome .gcard>i svg{width:24px;height:24px;fill:none;stroke:#E2AA55;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html #appHome .gcard>span{flex:1;min-width:0}
html #appHome .gcard b{display:block;font-size:15.5px;font-weight:600}
html #appHome .gcard small{display:block;margin-top:3px;font-size:11px;letter-spacing:.06em;color:var(--lt-champagne)}
html #appHome .gcard em{flex:none;padding:9px 14px;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px rgba(214,154,62,.55);color:#F0C27A;font:600 13.5px var(--lt-sans);font-style:normal}
html #appHome .home-cta-more{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 auto 14px;font-size:11.5px;color:var(--lt-muted);text-align:center}
html #appHome .home-cb{padding:15px 8px;margin:-15px -8px;border:0;background:none;color:#F0C27A;font:500 12.5px var(--lt-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}   /* 44 px to tap, no taller on screen */

/* ---- languages ---- */
html[dir=rtl] #appHome .app-home-eyebrow{font-family:var(--lt-sans-ar);font-size:12.5px;font-weight:600;letter-spacing:0}
html[dir=rtl] #appHome .app-home-eyebrow::before{background:linear-gradient(270deg,rgba(var(--lt-l1),0),rgba(var(--lt-l1),.9))}
html[dir=rtl] #appHome .app-home-intro h1{font-family:var(--lt-sans-ar);font-weight:600;font-size:clamp(28px,7.6vw,52px);line-height:1.26;letter-spacing:0}
html[dir=rtl] #appHome .app-home-intro p,html[dir=rtl] #appHome .wel-cta>*,html[dir=rtl] #sitePulse .pl-tabs button,html[dir=rtl] #sitePulse .pl-go{font-family:Inter,"Noto Sans Arabic",Tahoma,system-ui,sans-serif;letter-spacing:0}
html[dir=rtl] #appHome .gcard small{letter-spacing:0}
html[lang=zh] #appHome .app-home-intro h1{font-weight:600;font-size:clamp(26px,7.2vw,50px);letter-spacing:0;line-height:1.2}
@media (max-width:400px){html #appHome .app-home-eyebrow{gap:8px;letter-spacing:.1em}html #appHome .app-home-eyebrow::before{width:14px}}
@media (forced-colors:active){html #appHome .app-home-intro h1 .h-gold{background:none;color:CanvasText;-webkit-text-fill-color:currentColor}}
@media (min-width:761px){html #appHome .app-home-intro{text-align:center}html #appHome .app-home-intro p{margin-inline:auto}}

/* ---- motion: one slow light, once, and only where the phone allows it; still, it is the same picture ---- */
@media (prefers-reduced-motion:no-preference){
  html #appHome .app-home-intro h1 .h-gold{animation:ltFoil 2.4s cubic-bezier(.3,.6,.2,1) .4s 1 both}
  html[dir=rtl] #appHome .app-home-intro h1 .h-gold{animation-name:ltFoilR}
  html #appHome .card.pulse::after{animation:ltSweep 3.2s cubic-bezier(.35,.1,.25,1) 1s 1 both}
  html[dir=rtl] #appHome .card.pulse::after{animation-name:ltSweepR}
}
@keyframes ltFoil{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}
@keyframes ltFoilR{from{background-position:0 0,0 0}to{background-position:100% 0,0 0}}
@keyframes ltSweep{from{transform:translateX(-110%)}to{transform:translateX(280%)}}
@keyframes ltSweepR{from{transform:translateX(110%)}to{transform:translateX(-280%)}}
@media (prefers-reduced-motion:reduce){html #appHome .app-home-intro h1 .h-gold,html #appHome .card.pulse::after{animation:none!important}}