/* ============================================================
   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:860px;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:660px;margin:0 auto;font-size:17px;line-height:1.75}
.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-label{font:500 11px 'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--nova-muted)}
.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}