/* Serann Marketing premium layer: grain, spotlight, globe, simulator, industry explorer, world clocks. */
html body #ssx{--f-body:var(--f-d);--pt:linear-gradient(180deg,#ffffff 0%,#d9dde3 45%,#9aa1ab 100%)}
html body #ssx .phero .em,html body #ssx .cta .em,html body #ssx .ft .em,html body #ssx .film .em{background:var(--pt);-webkit-background-clip:text;background-clip:text;color:transparent}
html body #ssx .phero .em *, html body #ssx .cta .em *{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}

/* film grain over everything, very light */
html body #ssx::after{content:"";position:fixed;inset:-50%;z-index:2147483000;pointer-events:none;opacity:.045;
  background-image: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:sm-grain 1.2s steps(6) infinite}
@keyframes sm-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* cursor spotlight on cards */
html body #ssx .spot{background-image:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(130,138,150,.13),transparent 42%)}
html body #ssx .t-out.spot,html body #ssx .pn.spot,html body #ssx .scn .spot{background-image:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(255,255,255,.07),transparent 42%)}
html body #ssx .tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}

/* world clocks strip (footer) */
#ssx .sm-clocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px}
#ssx .sm-clocks>div{display:flex;flex-direction:column;gap:6px;padding:18px 16px 18px 0}
#ssx .sm-clocks b{font:600 clamp(22px,2.2vw,30px)/1 var(--f-d);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
#ssx .sm-clocks span{font:500 11px/1.3 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
#ssx .sm-clocks i{width:7px;height:7px;border-radius:50%;background:#5c6068;flex:none}
#ssx .sm-clocks i.open{background:#4cd08a;box-shadow:0 0 0 4px rgba(76,208,138,.14)}

/* ---------- globe ---------- */
#ssx .glb-sec{--bg:#09090A;--bg2:#111113;--ink:#F4F3EF;--ink2:#B7B5AF;--muted:#8A8882;--line:rgba(244,243,239,.1);--line2:rgba(244,243,239,.18);--a:#8E7CFF;background:#09090A;color:var(--ink);margin:0 clamp(10px,1.4vw,20px);border-radius:clamp(28px,4vw,56px);overflow:hidden;position:relative}
#ssx .glb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
#ssx .glb-wrap{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;margin-left:auto;touch-action:pan-y}
#ssx .glb-wrap canvas{width:100%!important;height:100%!important;display:block;cursor:grab}
#ssx .glb-wrap canvas:active{cursor:grabbing}
#ssx .glb-tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transform:translate(-50%,-130%);transition:opacity .2s;padding:10px 14px;border-radius:12px;background:rgba(17,17,19,.92);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);white-space:nowrap;font:500 13px/1.35 var(--f-body);color:#F4F3EF}
#ssx .glb-tip b{display:block;font:600 15px var(--f-d)}
#ssx .glb-tip small{font:500 11px var(--f-m);letter-spacing:.1em;color:#8A8882;text-transform:uppercase}
#ssx .glb-tip.on{opacity:1}
#ssx .glb-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
#ssx .glb-legend button{min-height:40px;padding:8px 16px 8px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink2);font:500 14px var(--f-body);cursor:pointer;transition:background .3s,color .3s}
#ssx .glb-legend button.on,#ssx .glb-legend button:hover{background:#F4F3EF;color:#0B0B0C;border-color:#F4F3EF}
#ssx .glb-list{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:22px;font-size:14.5px;color:var(--ink2)}
#ssx .glb-list a{border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
#ssx .glb-list a:hover,#ssx .glb-list a.hot{color:#fff;border-color:rgba(255,255,255,.5)}
#ssx .glb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:34px}
#ssx .glb-stats>div{padding:18px 12px 0 0;display:flex;flex-direction:column;gap:6px}
#ssx .glb-stats b{font:600 clamp(28px,3vw,40px)/1 var(--f-d);letter-spacing:-.03em}
#ssx .glb-stats span{font:500 11px/1.3 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.phero .glb-wrap{max-width:560px}

/* ---------- profit simulator ---------- */
#ssx .sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px}
#ssx .sim-in{border-radius:24px;border:1px solid var(--line);background:var(--bg2);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:26px}
#ssx .sim-out{border-radius:24px;background:#0D0D0F;color:#F4F3EF;padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:22px;--line:rgba(244,243,239,.1);--muted:#8A8882;position:relative;overflow:hidden}
#ssx .rng{display:flex;flex-direction:column;gap:12px}
#ssx .rng-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#ssx .rng-h span{font:500 13.5px var(--f-body);color:var(--ink2)}
#ssx .rng-h b{font:600 24px var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
#ssx input[type=range].sm-r{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:50%}
#ssx input[type=range].sm-r::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ink) var(--p),var(--line2) var(--p))}
#ssx input[type=range].sm-r::-moz-range-track{height:4px;border-radius:4px;background:var(--line2)}
#ssx input[type=range].sm-r::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink)}
#ssx input[type=range].sm-r::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--bg2);border:2px solid var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s}
#ssx input[type=range].sm-r::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--bg2);border:2px solid var(--ink)}
#ssx input[type=range].sm-r:active::-webkit-slider-thumb{transform:scale(1.18)}
#ssx .sim-cur{display:flex;gap:6px}
#ssx .sim-cur button{min-height:38px;padding:7px 14px 7px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink2);font:500 14px var(--f-body);cursor:pointer}
#ssx .sim-cur button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#ssx .sim-big{display:flex;flex-direction:column;gap:8px}
#ssx .sim-big span{font:500 11.5px var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:#8A8882}
#ssx .sim-big b{font:600 clamp(52px,7vw,104px)/.92 var(--f-d);letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:var(--pt);-webkit-background-clip:text;background-clip:text;color:transparent}
#ssx .sim-big b.neg{background:none;color:#e48877}
#ssx .sim-bar{display:flex;height:56px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}
#ssx .sim-bar i{display:block;height:100%;transition:width .6s cubic-bezier(.16,.84,.24,1)}
#ssx .sim-bar .c1{background:#3a3d44}#ssx .sim-bar .c2{background:#6f7580}#ssx .sim-bar .c3{background:linear-gradient(180deg,#f4f5f7,#b9bfc8)}
#ssx .sim-key{display:flex;flex-wrap:wrap;gap:8px 20px;font:500 12.5px var(--f-body);color:#B7B5AF}
#ssx .sim-key span{display:inline-flex;align-items:center;gap:8px}
#ssx .sim-key i{width:10px;height:10px;border-radius:3px;display:inline-block}
#ssx .sim-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
#ssx .sim-grid>div{display:flex;flex-direction:column;gap:6px;padding:16px 10px 0 0}
#ssx .sim-grid b{font:600 clamp(20px,2vw,26px) var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#ssx .sim-grid span{font-size:12.5px;color:#8A8882;font-family:var(--f-body)}
#ssx .sim-note{font-size:14.5px;line-height:1.55;color:#B7B5AF;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}

/* ---------- industry explorer ---------- */
#ssx .ixp{border-top:1px solid var(--line)}
#ssx .ixp a{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:20px;align-items:center;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
#ssx .ixp a .n{font:500 12px var(--f-m);letter-spacing:.14em;color:var(--muted)}
#ssx .ixp a h3{margin:0;font:600 clamp(24px,3.4vw,52px)/1.02 var(--f-d);letter-spacing:-.035em;color:var(--ink);transition:color .4s,transform .5s var(--ease)}
#ssx .ixp a .go{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:background .35s,color .35s,transform .5s var(--ease)}
#ssx .ixp:hover a h3{color:var(--muted)}
#ssx .ixp a:hover h3{color:var(--ink);transform:translateX(14px)}
#ssx .ixp a:hover .go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
#ssx .ixp-card{position:fixed;left:0;top:0;width:340px;pointer-events:none;z-index:50;opacity:0;transform:translate3d(-999px,-999px,0) scale(.9);transition:opacity .25s;border-radius:20px;padding:22px;background:#0D0D0F;color:#F4F3EF;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
#ssx .ixp-card.on{opacity:1}
#ssx .ixp-card .k{font:500 11px var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:#8A8882}
#ssx .ixp-card p{margin:10px 0 0;font-size:15px;line-height:1.5;color:#d6d4ce}
#ssx .ixp-card .st{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
#ssx .ixp-card .st b{display:block;font:600 24px var(--f-d);letter-spacing:-.02em;background:var(--pt);-webkit-background-clip:text;background-clip:text;color:transparent}
#ssx .ixp-card .st span{font-size:11.5px;color:#8A8882}

@media (max-width:980px){#ssx .glb-grid,#ssx .sim{grid-template-columns:minmax(0,1fr)}#ssx .glb-wrap{margin:0 auto}#ssx .sm-clocks{grid-template-columns:repeat(3,minmax(0,1fr))}#ssx .ixp-card{display:none}}
@media (max-width:640px){#ssx .sm-clocks{grid-template-columns:repeat(2,minmax(0,1fr))}#ssx .sim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#ssx .ixp a{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}#ssx .ixp a .go{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){html body #ssx::after{animation:none}}
#ssx .glb-wrap.no-gl{background:radial-gradient(circle at 50% 45%,#1b1c20 0%,#0b0b0d 60%,transparent 61%);border-radius:50%}
/* buttons: arrow visible and text optically centred (rule: button text must look centred, horizontally and vertically) */
html body #ssx .btn.mag .ar,html body #ssx .btn .ar{color:inherit}

html body #ssx .chips-l a,html body #ssx .glb-legend button,html body #ssx .sim-cur button,html body #ssx .seg button,html body #ssx .cal-f button{padding-top:8px;padding-bottom:8px}