/* ============================================================
   Root site (technoz.org) — Nova visual layer.
   Ported 1:1 from /retnex/retnex.css so the homepage, /about/ and
   /retnex/ share one theme: graphite + white, red used only as an accent.
   Applies to the root site ONLY — not Pterodactyl, Pangolin or /retnex.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root{
  --nova-bg:#1f1f1f;
  --nova-surface:#000000;
  --nova-surface-2:#141414;
  --nova-line:rgba(255,255,255,.12);
  --nova-ink:#f8fafc;
  --nova-body:#e2e8f0;
  --nova-muted:#94a3b8;
  --nova-red:#dc2626;
  --nova-red-2:#991b1b;
}

html,body{background:var(--nova-bg)!important}
body{color:var(--nova-body)!important;font-family:Inter,Manrope,Arial,sans-serif!important;background-image:none!important}
h1,h2,h3,.brand-name,.footer-brand-name{font-family:Poppins,Manrope,Arial,sans-serif!important}

/* Script-specific faces (the switcher can set any of 9 languages). */
html[lang="bn"] body,html[lang="bn"] body *{font-family:'Hind Siliguri',Manrope,Arial,sans-serif!important}
html[lang="hi"] body,html[lang="hi"] body *{font-family:'Poppins',Manrope,Arial,sans-serif!important}
html[lang="bn"] .brand-name,html[lang="bn"] .footer-brand-name,
html[lang="hi"] .brand-name,html[lang="hi"] .footer-brand-name{font-family:Poppins,Manrope,Arial,sans-serif!important}
html[lang="bn"] h1,html[lang="hi"] h1,
html[lang="bn"] h2,html[lang="hi"] h2{letter-spacing:-.5px!important;line-height:1.25!important}

/* Background: monochrome ambient + white grid (identical treatment to /retnex/) */
.ambient{opacity:.5!important;filter:blur(140px)!important}
.ambient.a{background:rgba(255,255,255,.03)!important}
.ambient.b{background:rgba(255,255,255,.025)!important}
.grid{opacity:.10!important;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)!important}
body::before,body::after{display:none!important}

.glass{background:rgba(0,0,0,.55)!important;border:1px solid var(--nova-line)!important;backdrop-filter:blur(18px)}

/* ---------------- Nav ---------------- */
.nav{background:rgba(0,0,0,.6)!important;border:1px solid var(--nova-line)!important;box-shadow:0 22px 70px rgba(0,0,0,.3)!important}
.brand{cursor:default}
.brand-name,.footer-brand-name{color:var(--nova-ink)!important}
.tm-mark{color:var(--nova-red)!important;text-shadow:none!important}
.logo-wrap{border-color:rgba(255,255,255,.18)!important;box-shadow:0 0 0 3px rgba(255,255,255,.05),inset 0 0 10px rgba(255,255,255,.05)!important}
.logo-wrap:hover{box-shadow:0 0 0 3px rgba(255,255,255,.08),inset 0 0 14px rgba(255,255,255,.08)!important}

/* Legacy marker from the old build is replaced by the GSAP pill below. */
.nav-marker{display:none!important}

.links{position:relative}
.nav-link{position:relative;z-index:1;color:var(--nova-muted)!important;text-decoration:none;font-size:14px;padding:10px 18px;border-radius:10px;transition:color .3s ease;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;display:inline-block}
.nav-link:hover{color:var(--nova-ink)!important}
.links a.active,.nav-link.active{color:#0a0a0a!important;font-weight:700;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;transform:none!important}
.links a.active:hover,.nav-link.active:hover{color:#0a0a0a!important}
/* The one white element in the bar; GSAP positions it behind the active link. */
.nav-pill-ghost{position:absolute;background:#ffffff;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:0;pointer-events:none}

.nav-cta{background:var(--nova-red)!important;border:none!important;border-radius:10px!important;box-shadow:none!important;color:#fff!important;transition:background .2s}
.nav-cta:hover{background:#b91c1c!important}

/* ---------------- Type ---------------- */
.eyebrow{color:var(--nova-muted)!important;border:1px solid var(--nova-line)!important;background:rgba(255,255,255,.04)!important}
.eyebrow i{background:var(--nova-red)!important;box-shadow:0 0 0 4px rgba(220,38,38,.15),0 0 10px rgba(220,38,38,.6)!important}
.kicker{color:var(--nova-muted)!important}
.hero h1{color:var(--nova-ink)}
.hero h1 em{font-style:normal;background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:initial!important;color:var(--nova-red)!important}
.hero p{color:var(--nova-muted)!important}
.section h2,.network h2,.status h2{color:var(--nova-ink)}
.section-copy p,.network p{color:var(--nova-muted)!important}

/* Buttons: solid red primary, pill outline secondary — same as /retnex/. */
.primary{color:#fff!important;background:var(--nova-red)!important;border-radius:10px!important;box-shadow:none!important;transition:background .2s}
.primary:hover{background:#b91c1c!important}
.secondary{color:var(--nova-body)!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(0,0,0,.35)!important;border-radius:999px!important}
.secondary:hover{border-color:rgba(255,255,255,.4)!important;background:rgba(0,0,0,.55)!important}

.hero-stats strong{color:var(--nova-ink)}
.hero-stats span{color:var(--nova-muted)}
.hero-stats div+div{border-left:1px solid var(--nova-line)!important}

/* ---------------- Cards ---------------- */
.card{background:var(--nova-surface-2)!important;border:1px solid var(--nova-line)!important;transition:.25s transform,.25s border-color}
.card:hover{border-color:rgba(255,255,255,.28)!important;transform:translateY(-4px)}
.card.featured{background:var(--nova-surface-2)!important}
.card-icon{color:var(--nova-ink)!important}
.tag{color:var(--nova-muted)!important}
.card h3{color:var(--nova-ink)}
.card p{color:var(--nova-muted)!important}
.card b{color:var(--nova-ink)!important}
.card b span{color:var(--nova-red)!important}
.shine{display:none!important}
.region-row{color:var(--nova-muted)!important}
.region-row i{background:var(--nova-red)!important;box-shadow:0 0 0 3px rgba(220,38,38,.16),0 0 10px rgba(220,38,38,.55)!important}

/* ---------------- Network ---------------- */
.network{background:rgba(0,0,0,.55)!important;border:1px solid var(--nova-line)!important}
.map{background:radial-gradient(circle at 40% 50%,rgba(255,255,255,.05),transparent 40%)!important}
.orbit{border-color:rgba(255,255,255,.10)!important}
.map path{stroke:var(--nova-red)!important;filter:drop-shadow(0 0 5px rgba(220,38,38,.55))!important}
.node{color:var(--nova-body)}
.node i{background:var(--nova-red)!important;box-shadow:0 0 0 4px rgba(220,38,38,.14),0 0 12px rgba(220,38,38,.6)!important}
.node small{color:var(--nova-muted)!important}
#globe{border-radius:50%}

/* ---------------- Status ---------------- */
.status-pill{border:1px solid var(--nova-line)!important;background:rgba(255,255,255,.04)!important;color:var(--nova-body)!important}
.status-pill i{background:var(--nova-red)!important;box-shadow:0 0 0 4px rgba(220,38,38,.15),0 0 12px rgba(220,38,38,.6)!important}

/* ---------------- Footer ---------------- */
.footer-premium{background:rgba(0,0,0,.7)!important;box-shadow:none!important;border-top:0!important}
.footer-premium::before,.footer-premium::after{display:none!important}
.footer-tagline{color:var(--nova-muted)!important}
.footer-badge{border:1px solid var(--nova-line)!important;background:rgba(255,255,255,.04)!important;color:var(--nova-ink)!important;box-shadow:none!important}
.footer-badge .status-dot,.status-dot{background:var(--nova-red)!important;box-shadow:0 0 0 3px rgba(220,38,38,.2),0 0 10px var(--nova-red)!important}
.footer-col h4{color:var(--nova-muted)!important;text-shadow:none!important}
.footer-col a{color:var(--nova-muted)!important}
.footer-col a:hover{color:var(--nova-ink)!important;text-shadow:none!important}
.footer-bottom{border-top:1px solid var(--nova-line)!important;color:#5c5c66!important}
.footer-tm{color:#6b6b76!important}
.footer-logo{filter:none!important}

/* ---------------- Language switcher (Nova styling, behaviour untouched) ---------------- */
.language-trigger{background:var(--nova-surface-2)!important;border:1px solid var(--nova-line)!important;box-shadow:none!important;color:var(--nova-ink)!important}
.language-trigger:hover,.language-switcher.open .language-trigger{background:#242424!important;border-color:rgba(255,255,255,.28)!important}
.language-menu{background:var(--nova-surface-2)!important;border:1px solid var(--nova-line)!important;box-shadow:0 20px 50px rgba(0,0,0,.55)!important}
.language-menu button{color:var(--nova-body)!important}
.language-menu button:hover,.language-menu button.selected{background:rgba(255,255,255,.08)!important;color:var(--nova-ink)!important}
.language-chevron{color:var(--nova-muted)!important}

/* ---------------- Scrollbar ---------------- */
#custom-scrollbar-thumb{background:linear-gradient(180deg,#fff,#aaa 50%,#666)!important;box-shadow:0 0 8px rgba(255,255,255,.3)!important}


/* ============================================================
   Multi-page layout (one page per category, as on /retnex/)
   ============================================================ */

/* Home hero: the eyebrow is gone and the earth sits close under the bar. */
/* The whole hero is sized against viewport HEIGHT so earth + headline +
   buttons + stats always land on one screen. Everything scales with vh
   between a floor and a ceiling, so it holds on short laptops and large
   monitors alike. svh is used where supported (mobile URL bars). */
.root-hero{
  padding:0 0 18px!important;
  text-align:center;max-width:920px;margin:auto;
  min-height:calc(100vh - 92px);
  min-height:calc(100svh - 92px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(4px,1.1vh,14px);
}
#hero-globe{display:block;margin:0 auto!important;width:clamp(150px,29vh,300px)!important;height:clamp(150px,29vh,300px)!important}
.root-hero h1{margin:0!important;font-size:clamp(32px,6.4vh,74px)!important;line-height:.95;letter-spacing:-3px}
.root-hero p{margin:0 auto!important;font-size:clamp(13px,1.75vh,17px)!important;max-width:620px;line-height:1.6}
.root-hero .actions{margin:clamp(4px,1.2vh,16px) 0 0!important}
.root-hero .primary,.root-hero .secondary{padding:clamp(11px,1.5vh,15px) clamp(16px,2vw,22px)!important;font-size:clamp(13px,1.6vh,14px)!important}
.root-hero .hero-stats{margin:clamp(6px,1.4vh,18px) auto 0!important;padding:clamp(10px,1.5vh,18px)!important;width:100%}
.root-hero .hero-stats strong{font-size:clamp(16px,2.2vh,22px)}
.root-hero .hero-stats span{font-size:clamp(10px,1.3vh,12px)}

/* Category pages share one compact header. */
.root-subhero{padding:26px 0 34px!important;text-align:center;max-width:840px;margin:auto}
.root-subhero h1{letter-spacing:-3px;line-height:.98;margin:20px 0 18px}
.root-subhero p{max-width:640px;margin:0 auto}
.root-subpage{padding:14px 0 90px!important}
.root-subpage .cards{margin-top:0!important}
.root-network{margin:6px 0 40px!important;grid-template-columns:1fr!important;padding:40px 6%!important}
.root-network .map{max-width:640px;margin:auto;width:100%}
/* Region cards: compact strips — the generic .card is a tall marketing card
   with a min-height and space-between, which left most of each box empty. */
.root-region-cards{grid-template-columns:repeat(5,1fr)!important;gap:12px!important;margin-top:0!important}
.root-region-cards .card{padding:15px 15px 13px!important;min-height:0!important;height:auto!important;display:block!important;border-radius:14px!important}
.root-region-cards .card:hover{transform:translateY(-2px)}
.root-region-cards .card-icon{font-size:15px!important;margin:0 0 7px!important;width:auto!important;height:auto!important;background:none!important;border:0!important;display:block!important}
.root-region-cards .tag{display:block;font-size:9.5px!important;letter-spacing:1px;margin:0 0 3px!important}
.root-region-cards .card h3{font-size:17px!important;margin:0 0 5px!important;letter-spacing:-.4px}
.root-region-cards .card p{font-size:12px!important;line-height:1.45!important;margin:0 0 9px!important}
.root-region-cards .region-row{position:static!important;bottom:auto!important;margin:0!important;padding:0!important;border:0!important;font-size:10.5px!important;gap:6px!important}
.root-region-cards .region-row i{width:6px!important;height:6px!important}
@media(max-width:1100px){.root-region-cards{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:760px){.root-region-cards{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:460px){.root-region-cards{grid-template-columns:1fr!important}}

/* Status board */
.root-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.root-status-item{padding:24px;border:1px solid var(--nova-line);border-radius:16px;background:var(--nova-surface-2);display:flex;flex-direction:column;gap:8px}
.root-status-head{display:flex;align-items:center;gap:10px}
.root-status-head i{width:9px;height:9px;border-radius:50%;background:var(--nova-red);box-shadow:0 0 0 4px rgba(220,38,38,.15),0 0 12px rgba(220,38,38,.6);flex-shrink:0}
.root-status-head h4{margin:0;font-size:17px;color:var(--nova-ink);font-family:Poppins,Manrope,Arial,sans-serif}
.root-status-region{font:500 11px 'DM Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--nova-muted)}
.root-status-state{font-size:13.5px;color:var(--nova-body)}
@media(max-width:700px){.root-status-grid{grid-template-columns:1fr}}

/* Shared closing band */
.root-cta{padding:56px 6%;border-radius:20px;background:var(--nova-surface-2);border:1px solid var(--nova-line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:22px;margin:0 0 70px}
.root-cta h2{margin:8px 0 0}
@media(max-width:640px){.root-cta{flex-direction:column;align-items:flex-start;padding:34px 22px}}

/* Language switcher floats top-right on desktop (as on /retnex/). */
.root-lang-switcher{position:fixed;top:28px;right:28px;z-index:50;margin:0!important}

/* ---------------- Responsive: hamburger below 900px (same as /retnex/) ---------------- */
.root-nav-toggle{display:none}

@media(max-width:900px){
  .nav{width:fit-content!important;justify-content:flex-start!important;gap:12px!important;padding:9px 10px 9px 14px!important}
  .root-nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:42px;height:42px;flex:0 0 42px;padding:0;border-radius:11px;border:1px solid var(--nova-line);background:rgba(255,255,255,.05);cursor:pointer;transition:background .2s,border-color .2s}
  .root-nav-toggle:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
  .root-nav-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:var(--nova-ink);transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s}
  .root-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .root-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .root-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* .nav is position:sticky, which already establishes the containing block. */
  .links{display:none!important;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(300px,calc(100vw - 40px));flex-direction:column;gap:4px;padding:10px;border-radius:16px;border:1px solid var(--nova-line);background:rgba(8,8,8,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 26px 60px rgba(0,0,0,.65);z-index:30}
  .nav.menu-open .links{display:flex!important}
  .nav-link{width:100%;text-align:center;padding:12px 14px!important;font-size:15px!important;border-radius:10px}
  .nav-pill-ghost{display:none!important}
  .links a.active,.nav-link.active{background:#ffffff!important;color:#0a0a0a!important;border-color:#ffffff!important;box-shadow:none!important}

  /* The switcher is moved into the bar by JS at this breakpoint. */
  .nav .root-lang-switcher{position:static!important;top:auto!important;right:auto!important;margin:0!important;flex:0 0 auto}
  .nav .root-lang-switcher .language-menu{position:absolute;right:0!important;left:auto!important;top:calc(100% + 12px)!important}

  /* Keep the CTA as a compact arrow button so the bar stays narrow. */
  .nav-cta{font-size:0!important;padding:0 12px!important;height:42px;display:inline-flex;align-items:center}
  .nav-cta span{font-size:16px}
  .nav-cta span[data-i18n]{display:none}

  .root-subhero{padding:18px 0 26px!important}
  .orbit{max-width:calc(100vw - 56px)!important}
  .o1{width:min(250px,calc(100vw - 90px))!important}
  .o2{width:min(430px,calc(100vw - 56px))!important}
}

@media(max-width:560px){
  .root-lang-switcher .language-code{display:none!important}
  .nav .root-lang-switcher .language-trigger{min-width:46px!important;width:46px!important;padding:0!important;justify-content:center!important}
  .brand-name{font-size:20px}
  .logo-wrap{width:36px;height:36px}
}

/* ============================================================
   /about/ components.
   These used to live in /about/about.css, which the router never loaded
   (an AJAX navigation swaps #pageContent only, not <head>) — leaving the
   emblem unconstrained at its full natural size. They belong here so every
   route has them regardless of how the page was reached.
   ============================================================ */
.about-hero{padding:26px 0 40px;text-align:center;max-width:1040px;margin:auto}
.about-hero h1{color:var(--nova-ink);letter-spacing:-3px;line-height:.96}
.about-hero h1 em{font-style:normal;color:var(--nova-red)}
.about-hero p{color:var(--nova-muted)!important;max-width:980px;margin:0 auto;font-size:17px;line-height:1.7}
.about-emblem-wrap{position:relative;width:230px;height:230px;margin:24px auto 12px;display:grid;place-items:center}
.about-emblem-glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 68%);filter:blur(20px)}
.about-emblem{position:relative;width:230px;height:230px;border-radius:50%;object-fit:cover;background:#f6f6f4;padding:6px;border:1px solid var(--nova-line);box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.04)}
@media(max-width:560px){.about-emblem-wrap,.about-emblem{width:180px;height:180px}}
.about-crest-row{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.about-crest{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 22px;border:1px solid var(--nova-line);border-radius:14px;background:var(--nova-surface-2);min-width:104px}
.about-crest-mark{font-size:24px;line-height:1}
.about-crest-img{height:33px;width:auto;display:block;margin:0 auto}
.about-crest-label{font:500 11px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--nova-muted)}
.about-crest-years{font:500 10px 'DM Mono',monospace;letter-spacing:.5px;color:var(--nova-muted);opacity:.6;margin-top:-4px}
.about-section{padding:66px 0}
.about-section .section-copy{max-width:640px}
.about-section h2{color:var(--nova-ink);font-size:clamp(30px,4.4vw,52px);letter-spacing:-2px;line-height:1.05;margin:14px 0}
.about-section .section-copy p{color:var(--nova-muted)!important;line-height:1.75;max-width:600px}
.about-section .section-copy p em{color:var(--nova-body);font-style:italic;font-family:'Fraunces',Georgia,serif}
.about-prose{margin-top:36px;padding:38px 42px;border-radius:20px}
.about-prose p{color:var(--nova-body);font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.85;margin:0 0 20px}
.about-prose p:last-child{margin-bottom:0}
.about-prose p em{color:#fff;font-style:italic}
.about-prose--wide{max-width:820px}
@media(max-width:600px){.about-prose{padding:28px 24px}.about-prose p{font-size:16px}}
.about-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.about-card{position:relative;overflow:hidden;padding:32px;border:1px solid var(--nova-line);border-radius:20px;background:linear-gradient(160deg,#181818,#0e0e0e)}
.about-card-flag{height:5px;width:64px;border-radius:99px;margin-bottom:22px}
.about-card-flag--raj{background:linear-gradient(90deg,#c8102e,#ffffff 50%,#012169)}
.about-card-flag--soviet{background:linear-gradient(90deg,#b00000,#e4b400)}
.about-tag{display:block;font:500 11px 'DM Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--nova-muted);margin-bottom:8px}
.about-card h3{color:var(--nova-ink);font-size:24px;letter-spacing:-1px;margin:0 0 14px}
.about-card p{color:var(--nova-muted);font-size:14.5px;line-height:1.8;margin:0}
@media(max-width:760px){.about-duo{grid-template-columns:1fr}}
.about-company{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-top:44px;align-items:start}
.about-company-lead{padding:36px 38px;border-radius:20px}
.about-company-lead p{color:var(--nova-body);font-size:16px;line-height:1.85;margin:0 0 18px}
.about-company-lead p:last-child{margin-bottom:0}
.about-company-lead strong{color:#fff;font-weight:600}
.about-pillars{display:flex;flex-direction:column;gap:14px}
.about-pillar{padding:22px 24px;border:1px solid var(--nova-line);border-radius:16px;background:var(--nova-surface-2)}
.about-pillar-i{font-size:22px;color:var(--nova-ink);display:block;margin-bottom:10px}
.about-pillar h4{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--nova-ink)}
.about-pillar p{margin:0;color:var(--nova-muted);font-size:13px;line-height:1.65}
@media(max-width:820px){.about-company{grid-template-columns:1fr}}
.about-cta{padding:64px 6%;border-radius:20px;background:linear-gradient(150deg,#2a2a2a,#0e0e0e 60%);border:1px solid var(--nova-line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:22px;margin-bottom:60px}
.about-cta h2{margin:8px 0 0;color:var(--nova-ink)}
.about-cta .kicker{color:var(--nova-muted)!important}
.about-cta .primary{color:#fff!important;background:var(--nova-red)!important;border-radius:10px!important;box-shadow:none!important;transition:background .2s;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;text-decoration:none;font-weight:700}
.about-cta .primary:hover{background:#b91c1c!important}
@media(max-width:600px){.about-cta{flex-direction:column;align-items:flex-start;text-align:left;padding:38px 26px}}
.about-reveal{opacity:0;transform:translateY(24px)}
html[lang="bn"] .about-hero h1,html[lang="hi"] .about-hero h1,
html[lang="bn"] .about-section h2,html[lang="hi"] .about-section h2{letter-spacing:-.5px!important;line-height:1.25!important}

/* ============================================================
   /network/ — Gomberg 1942 world map with the Technoz route drawn on top
   ============================================================ */
.tz-map-wrap{margin:6px 0 30px}
.tz-map{position:relative;border:1px solid var(--nova-line);border-radius:18px;overflow:hidden;background:#0d0d0d;line-height:0}
.tz-map-img{display:block;width:100%;height:auto;
  /* tame the cream lithograph so it sits in the dark theme without glare,
     while keeping the sheet legible and recognisably itself */
  filter:brightness(.74) contrast(1.06) saturate(.78) sepia(.08)}
.tz-map::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 78% 72% at 50% 48%,transparent 42%,rgba(0,0,0,.55) 100%)}
.tz-map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Routes */
.tz-route-glow{fill:none;stroke:var(--nova-red);stroke-width:16;opacity:.20;
  stroke-linecap:round;filter:blur(7px)}
.tz-route{fill:none;stroke:#ff4646;stroke-width:5.5;stroke-linecap:round;
  stroke-dasharray:26 20;animation:tzFlow 2.4s linear infinite}
@keyframes tzFlow{to{stroke-dashoffset:-46}}

/* Nodes */
.tz-dot{fill:#ff5252;stroke:rgba(0,0,0,.65);stroke-width:3}
.tz-dot--home{fill:#fff;stroke:var(--nova-red);stroke-width:6}
.tz-halo{fill:none;stroke:var(--nova-red);stroke-width:4;opacity:.5;
  transform-box:fill-box;transform-origin:center;animation:tzPulse 2.8s ease-out infinite}
@keyframes tzPulse{0%{transform:scale(.55);opacity:.65}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* Labels — dark halo keeps them readable over land or sea */
.tz-label{fill:#fff;font-family:Poppins,Inter,Arial,sans-serif;font-size:34px;font-weight:600;
  paint-order:stroke;stroke:rgba(0,0,0,.8);stroke-width:7;stroke-linejoin:round;letter-spacing:.5px}
.tz-label--home{font-size:40px;fill:#ffe2e2}

.tz-leader{stroke:rgba(255,255,255,.5);stroke-width:2.5;stroke-dasharray:6 6}

/* ============================================================
   /network/ single-screen layout: map, then region strip, then the
   heading. The map is sized from the height that is LEFT OVER after the
   strip and caption, so the whole page lands inside one viewport instead
   of the map dictating the height and pushing content below the fold.
   ============================================================ */
.tz-net{--tz-map-aspect:2.4368;--tz-reserved:474px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:10px 0 18px;min-height:calc(100vh - 92px);min-height:calc(100svh - 92px);justify-content:center}
.tz-net .tz-map{width:min(100%,calc((100vh - var(--tz-reserved)) * var(--tz-map-aspect)));
  width:min(100%,calc((100svh - var(--tz-reserved)) * var(--tz-map-aspect)))}
.tz-net .root-region-cards{width:100%}

/* Region strip — thinner: the node line and status sit on one row. */
.root-region-cards .card{padding:11px 13px 10px!important}
.root-region-cards .card-icon{font-size:13px!important;margin:0 0 4px!important}
.root-region-cards .tag{font-size:9px!important;margin:0 0 2px!important}
.root-region-cards .card h3{font-size:15.5px!important;margin:0 0 4px!important}
.root-region-cards .card p{font-size:11px!important;margin:0!important;display:block!important}
.root-region-cards .region-row{display:flex!important;font-size:10px!important;margin:5px 0 0!important}

/* Caption block moved beneath the cards */
.tz-net-caption{text-align:center;max-width:820px;margin:0 auto}
.tz-net-caption .eyebrow{margin-bottom:8px}
.tz-net-caption h1{font-size:clamp(26px,4.6vh,54px)!important;line-height:1.02;letter-spacing:-2px;margin:0 0 8px!important;color:var(--nova-ink)}
.tz-net-caption h1 em{font-style:normal;color:var(--nova-red)}
.tz-net-caption p{color:var(--nova-muted)!important;font-size:clamp(12px,1.6vh,15.5px)!important;line-height:1.55;margin:0 auto 8px!important;max-width:620px}
.tz-map-cred{display:block;font:500 10.5px 'DM Mono',monospace;color:#6b7280;letter-spacing:.2px}
.tz-map-cred em{font-style:italic}

@media(max-width:1100px){.tz-net{--tz-reserved:514px}}
@media(max-width:760px){
  .tz-net{--tz-reserved:0px;min-height:0;justify-content:flex-start;padding-top:6px}
  .tz-net .tz-map{width:100%}
  .root-region-cards .card p,.root-region-cards .region-row{display:block!important;margin-left:0!important}
}
.tz-net-eyebrow{margin:0 0 2px}

/* /minecraft/ feature strip */
.mc-strip-wrap{padding-top:0!important}
.mc-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mc-item{padding:20px;border:1px solid var(--nova-line);border-radius:16px;background:var(--nova-surface-2)}
.mc-i{display:block;font-size:18px;color:var(--nova-ink);margin-bottom:10px}
.mc-item h4{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--nova-ink);font-family:Poppins,Inter,Arial,sans-serif}
.mc-item p{margin:0;font-size:12.5px;line-height:1.6;color:var(--nova-muted)}
@media(max-width:1000px){.mc-strip{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mc-strip{grid-template-columns:1fr}}

/* Platform "Operations" card: five regions in one row previously grazed the
   card's right edge in English. Allow wrapping + row-gap + slight padding
   cushion so Canton never sits on the border. */
.section .card .region-row{flex-wrap:wrap!important;row-gap:6px!important;padding-right:12px!important;max-width:100%}
.section .card .region-row > span{white-space:nowrap}

/* ---- Services page ---- */
.sv-cards .card{display:flex;flex-direction:column}
.sv-cards .card p{max-width:none}
/* The moderation bot is not a link yet, so its badge sits where the card's
   call-to-action would otherwise be. */
.sv-badge{margin-top:auto;align-self:flex-start;padding:7px 13px;border-radius:999px;
  font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#e8a33d;background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.35)}
.sv-soon{opacity:.92}
.sv-cards .card b{position:static;margin-top:auto;padding-top:18px}
/* Four services read better as a 2x2 block than squeezed into a single row. */
.sv-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px;margin-left:auto;margin-right:auto}
@media (max-width:760px){ .sv-cards{grid-template-columns:1fr} }

/* About page wallpaper.

   A 100vh band at the top of the document, not a fixed backdrop: the image
   covers the first screen and then scrolls away with the page.

   On body::before rather than its own <div>, because a div would be a child of
   <body> and the router only swaps #pageContent -- it would survive navigation
   and reappear on every page. The .about-bg class is swapped by the router, so
   the wallpaper follows it.

   z-index:0, not negative: a negative value paints behind body's own
   background-colour and is invisible. Zero sits above that colour and still
   below <main>, which is positioned and later in DOM order.

   The scrim gradient is layer one (topmost) because the photograph is bright
   and the page's body copy is white. Width comes from media queries since
   image-set() selects only on pixel density. */
.about-bg::before{
  /* line 38 of this file kills all body pseudo-elements with
     body::before,body::after{display:none!important} -- this rule has to
     out-shout it or the band never renders. */
  content:"";display:block!important;position:absolute;top:0;left:0;right:0;height:100vh;z-index:0;
  pointer-events:none;background-repeat:no-repeat;
  background-size:cover,cover;background-position:center,center 38%;
  background-image:linear-gradient(180deg,rgba(31,31,31,.84) 0%,rgba(31,31,31,.72) 38%,rgba(31,31,31,.88) 68%,rgba(31,31,31,.98) 88%,rgb(31,31,31) 97%),image-set(url("/about/writers-1280.webp") type("image/webp"),url("/about/writers-1280.jpg") type("image/jpeg"));
}
@media(min-width:1281px){.about-bg::before{background-image:linear-gradient(180deg,rgba(31,31,31,.84) 0%,rgba(31,31,31,.72) 38%,rgba(31,31,31,.88) 68%,rgba(31,31,31,.98) 88%,rgb(31,31,31) 97%),image-set(url("/about/writers-1920.webp") type("image/webp"),url("/about/writers-1920.jpg") type("image/jpeg"))}}
@media(min-width:1921px){.about-bg::before{background-image:linear-gradient(180deg,rgba(31,31,31,.84) 0%,rgba(31,31,31,.72) 38%,rgba(31,31,31,.88) 68%,rgba(31,31,31,.98) 88%,rgb(31,31,31) 97%),image-set(url("/about/writers-2560.webp") type("image/webp"),url("/about/writers-2560.jpg") type("image/jpeg"))}}
@media(min-width:2561px){.about-bg::before{background-image:linear-gradient(180deg,rgba(31,31,31,.84) 0%,rgba(31,31,31,.72) 38%,rgba(31,31,31,.88) 68%,rgba(31,31,31,.98) 88%,rgb(31,31,31) 97%),image-set(url("/about/writers-3840.webp") type("image/webp"),url("/about/writers-3840.jpg") type("image/jpeg"))}}
@media(max-width:700px){.about-bg::before{background-position:center,center 42%}}

/* --- mobile: stop the page panning sideways -------------------------------
   .ambient.a/.b are 700px blurred blobs at left:-170px / right:-360px. As
   position:absolute they widen the document's scroll box, so a 390px phone
   had a 750px document and 360px of empty pannable space -- swiping right
   dragged the whole layout away. body{overflow-x:hidden} does not stop that
   on mobile when the overflow comes from out-of-flow boxes.

   position:fixed removes them from the scroll box altogether. They are
   background glows, so pinning them to the viewport looks the same and skips
   repainting them on every scroll.

   overflow-x:clip on html is the backstop. clip, not hidden: hidden would
   turn html into a scroll container and break the sticky nav. */
html { overflow-x: clip }
.ambient { position: fixed !important }
@media (max-width: 760px) {
  /* smaller blobs on a small screen, so the blur is not doing 700px of work
     to fill a 390px viewport */
  .ambient { width: 420px !important; height: 420px !important;
             filter: blur(90px) !important }
  .ambient.a { top: -200px !important; left: -120px !important }
  .ambient.b { top: 200px !important; right: -180px !important }
}