/* SECBORN — global glass chrome (v7). Loaded site-wide after main/responsive. */
:root{--bg:#050507;--txt:#eef4ff;--mut:#b6c6dd;--mut2:#90a6c4;--acc:#2ed573;--cy:#00e7ff;--pur:#3a66e0;--amber:#ffb627;--rose:#ff4d6d;
  --grad:linear-gradient(120deg,#2ed573,#00e7ff 55%,#3a66e0);--gline:rgba(255,255,255,.10);--gline2:rgba(255,255,255,.18)}
body{background:var(--bg);color:var(--txt)}

/* animated backdrop */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(135% 120% at 50% 36%,transparent 52%,rgba(0,0,0,.52)),var(--bg)}
.bg .grain{position:absolute;inset:0;opacity:.12;background-size:170px 170px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* orbs are pre-softened gradients, not filter:blur(): a live blur on five big animated layers
   was re-rendered on every scroll frame and made iOS Safari paint blank tiles */
.bg .orb{position:absolute;border-radius:50%;opacity:.42;animation:drift 30s ease-in-out infinite;will-change:transform}
.bg .o1{width:680px;height:680px;background:radial-gradient(circle closest-side,rgba(39,221,110,.9),rgba(39,221,110,.48) 30%,rgba(39,221,110,.16) 60%,rgba(39,221,110,0));top:-400px;left:-320px;opacity:.50}
.bg .o2{width:540px;height:540px;background:radial-gradient(circle closest-side,rgba(255,194,61,.9),rgba(255,194,61,.42) 32%,rgba(255,194,61,.13) 62%,rgba(255,194,61,0));top:-350px;right:2%;animation-delay:-6s;opacity:.32}
.bg .o3{width:560px;height:560px;background:radial-gradient(circle closest-side,rgba(0,212,255,.85),rgba(0,212,255,.38) 32%,rgba(0,212,255,.11) 62%,rgba(0,212,255,0));top:20%;right:-170px;animation-delay:-12s}
.bg .o4{width:580px;height:580px;background:radial-gradient(circle closest-side,rgba(58,102,224,.85),rgba(58,102,224,.38) 32%,rgba(58,102,224,.11) 62%,rgba(58,102,224,0));bottom:-200px;left:6%;animation-delay:-17s}
.bg .o5{width:500px;height:500px;background:radial-gradient(circle closest-side,rgba(46,213,115,.85),rgba(46,213,115,.38) 32%,rgba(46,213,115,.11) 62%,rgba(46,213,115,0));bottom:-170px;right:22%;animation-delay:-22s;opacity:.55}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(44px,-36px) scale(1.09)}66%{transform:translate(-36px,30px) scale(.94)}}
.bg .haze{position:absolute;top:-12%;left:0;right:0;height:52%;background:radial-gradient(58% 100% at 50% 0,rgba(46,213,115,.05),transparent 70%);animation:breathe 13s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}

/* container sits above the backdrop */
.container{width:100%;max-width:1200px;margin-inline:auto;padding:0 26px;position:relative;z-index:2}

.glass{position:relative;border-radius:18px;
  background:linear-gradient(168deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 60%),rgba(9,11,15,.35);
  box-shadow:0 16px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25);border:1px solid var(--gline)}
.card.glass{background:rgba(15,15,19,.7)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,.04) 35%,transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.glass::after{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none}

.cat{display:inline-block;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--gline2);background:rgba(9,9,12,.78)}
.cat.ai{color:var(--cy)}.cat.v{color:var(--amber)}.cat.e{color:var(--rose)}.cat.r{color:#8fa8ff}.cat.g{color:var(--acc)}
.sev{display:inline-block;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.06em;padding:4px 9px;border-radius:6px;border:1px solid var(--gline2);background:rgba(7,7,9,.88)}
.sev.crit,.sev.critical{color:#ff647e;border-color:rgba(255,77,109,.6);box-shadow:0 0 16px rgba(255,77,109,.32)}
.sev.high{color:#ffc24d;border-color:rgba(255,182,39,.55);box-shadow:0 0 14px rgba(255,182,39,.22)}
.sev.medium{color:#43e08c;border-color:rgba(46,213,115,.5)}.sev.low{color:var(--mut);border-color:var(--gline2)}
.btn{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;padding:9px 17px;border-radius:999px;background:var(--acc);color:#04141d;box-shadow:0 6px 22px rgba(46,213,115,.4),inset 0 1px 0 rgba(255,255,255,.3);border:0;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
@keyframes pp{50%{opacity:.35}}

/* ticker */
.tick{position:relative;z-index:2;border-bottom:1px solid var(--gline);background:rgba(9,9,12,.72);overflow:hidden}
.tick::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:36%;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cy),var(--acc),transparent);box-shadow:0 0 12px rgba(0,231,255,.55);
  animation:tkbar 18s linear infinite}
@keyframes tkbar{0%{transform:translateX(-100%)}100%{transform:translateX(278%)}}
.tick .container{display:flex;align-items:center;gap:16px;height:42px}
.livepill{display:inline-flex;align-items:center;gap:7px;flex:none;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--acc);padding:6px 12px;border-radius:999px;background:rgba(46,213,115,.10);border:1px solid rgba(46,213,115,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.livepill .d{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 9px var(--acc);animation:pp 1.5s infinite}
.tkscroll{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 93%,transparent)}
.tktrack{display:inline-flex;align-items:center;gap:24px;white-space:nowrap;animation:marq 70s linear infinite}
@media (hover:hover) and (pointer:fine){.tkscroll:hover .tktrack{animation-play-state:paused}}
@keyframes marq{to{transform:translateX(-50%)}}
.ti{display:inline-flex;align-items:center;gap:9px;font:500 12px 'JetBrains Mono',monospace;color:var(--mut);transition:.15s}
.ti:hover{color:var(--txt)}.ti b{color:var(--txt)}
.ti .dot{width:6px;height:6px;border-radius:50%;flex:none}
.ti .dot.rose{background:var(--rose);box-shadow:0 0 8px var(--rose)}.ti .dot.cy{background:var(--cy);box-shadow:0 0 8px var(--cy)}.ti .dot.amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}.ti .dot.pur{background:var(--pur);box-shadow:0 0 8px var(--pur)}.ti .dot.green{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.sep{width:5px;height:5px;flex:none;transform:rotate(45deg);background:linear-gradient(135deg,var(--cy),var(--acc));opacity:.5}

/* subscribe card (footer #subscribe on every page + homepage aside) */
.subcard{position:relative;border-radius:16px;padding:20px;background:linear-gradient(135deg,rgba(46,213,115,.12),rgba(0,231,255,.07));border:1px solid rgba(0,231,255,.22)}
.subcard h4{font-family:Orbitron,sans-serif;font-size:15px;font-weight:700;margin-bottom:7px}
.subcard p{font-size:13px;color:var(--mut);margin-bottom:14px}

/* ── Listen (browser TTS) speaker button — glassy green orb, bottom-right on article images ── */
.tts-btn{position:absolute;right:14px;bottom:14px;z-index:6;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;padding:0;color:#eafff2;border:1px solid rgba(46,213,115,.34);
  background:radial-gradient(125% 125% at 30% 22%,rgba(46,213,115,.2),rgba(7,9,12,.62) 68%);
  box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .2s cubic-bezier(.34,1.5,.5,1),background .2s,border-color .2s,box-shadow .25s}
.tts-btn:hover,.tts-btn:focus-visible{transform:translateY(-2px) scale(1.07);border-color:rgba(46,213,115,.9);
  background:radial-gradient(125% 125% at 30% 22%,rgba(46,213,115,.55),rgba(7,9,12,.6) 70%);
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28),0 0 20px rgba(46,213,115,.45);outline:0}
.tts-btn:active{transform:translateY(0) scale(1)}
.tts-btn svg{width:19px;height:19px;fill:currentColor;display:block}
.tts-btn .i-pause{display:none}
.tts-btn.playing{color:#fff;border-color:rgba(46,213,115,.95);
  background:radial-gradient(125% 125% at 30% 22%,rgba(46,213,115,.6),rgba(7,9,12,.55) 72%);
  box-shadow:0 0 22px rgba(46,213,115,.5),0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.tts-btn.playing .i-play{display:none}.tts-btn.playing .i-pause{display:block}
.tts-btn.glow{animation:ttsglow 2.6s ease-in-out infinite}                 /* featured-only pulse */
@keyframes ttsglow{0%,100%{box-shadow:0 0 0 0 rgba(46,213,115,.5),0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)}50%{box-shadow:0 0 0 10px rgba(46,213,115,0),0 12px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2)}}
.tts-btn.primed{border-color:rgba(0,231,255,.78);color:#dcfbff;
  background:radial-gradient(125% 125% at 30% 22%,rgba(0,231,255,.4),rgba(7,9,12,.6) 70%);animation:ttsprime 1.5s ease-in-out infinite}  /* autoplay blocked → tap to start */
@keyframes ttsprime{0%,100%{box-shadow:0 0 0 0 rgba(0,231,255,.6),0 10px 26px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 11px rgba(0,231,255,0),0 10px 26px rgba(0,0,0,.5)}}
.sub .tts-btn,.row .thumb .tts-btn{width:36px;height:36px;right:11px;bottom:11px}
.sub .tts-btn svg,.row .thumb .tts-btn svg{width:16px;height:16px}
.sub .p{padding-right:54px}                                                /* keep the sub headline clear of the button */
.zdw-hero-img .tts-btn{width:54px;height:54px;right:18px;bottom:18px}
.zdw-hero-img .tts-btn svg{width:24px;height:24px}

@media (prefers-reduced-motion:reduce){.haze,.tktrack,.livepill .d,.orb,.live span,.tts-btn.glow,.tts-btn.primed{animation:none!important}}
