/* Access Data Systems — base stylesheet.
   All colour, spacing, radius and type decisions come from CSS variables that
   the admin GUI editor writes (see src/theme.js). Nothing is hard-coded here. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem);letter-spacing:-.03em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
::selection{background:var(--primary);color:var(--on-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:calc(var(--section-y) * .55)}
.grid{display:grid;gap:var(--gap)}
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:var(--pad)}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.hide{display:none!important}

/* ── eyebrow + section heads ───────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--accent);opacity:.6}
.sec-head{max-width:62ch;margin-bottom:calc(var(--gap) * 1.4)}
.sec-head p{font-size:1.05rem;color:var(--ink-dim);margin:0}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow::before{display:none}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.35rem;border-radius:calc(var(--radius) * .7);border:1px solid transparent;
  font:inherit;font-weight:600;font-size:.94rem;cursor:pointer;background:var(--btn-bg);
  color:var(--on-primary);transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
  box-shadow:0 6px 20px var(--primary-soft);white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--primary-soft)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn--ghost{--btn-bg:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{border-color:var(--primary);background:var(--primary-soft);box-shadow:none}
.btn--soft{--btn-bg:var(--primary-soft);color:var(--primary);border-color:var(--primary-line);box-shadow:none}
.btn--danger{--btn-bg:transparent;color:var(--danger);border-color:var(--danger);box-shadow:none}
.btn--danger:hover{background:var(--danger);color:#fff}
.btn--sm{padding:.44rem .85rem;font-size:.82rem}
.btn--block{width:100%}

/* ── cards ─────────────────────────────────────────────────────────────── */
.card{
  background:var(--card-bg);backdrop-filter:var(--card-blur);-webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--line);border-radius:var(--radius);padding:calc(var(--pad) * 1.5);
  position:relative;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.card--hover:hover{transform:translateY(-4px);border-color:var(--primary-line);box-shadow:var(--shadow)}
.card--flat{background:var(--surface);backdrop-filter:none}
.card__icon{
  width:2.85rem;height:2.85rem;border-radius:calc(var(--radius) * .55);display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid var(--primary-line);color:var(--accent);margin-bottom:1rem;
}
.card__icon svg{width:1.35rem;height:1.35rem}
.card h3{margin-bottom:.4rem}
.card p{color:var(--ink-dim);font-size:.94rem;margin:0}

.badge{
  display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-line);
}
.badge--accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.badge--ok{background:rgba(22,163,74,.14);color:var(--ok);border-color:rgba(22,163,74,.4)}
.badge--warn{background:rgba(245,158,11,.14);color:var(--warn);border-color:rgba(245,158,11,.4)}
.badge--danger{background:rgba(239,68,68,.14);color:var(--danger);border-color:rgba(239,68,68,.45)}
.badge--muted{background:transparent;color:var(--ink-faint);border-color:var(--line)}

/* ── header ────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:60;transition:background .25s ease,border-color .25s ease}
.site-head::before{
  content:"";position:absolute;inset:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:var(--bg);opacity:0;transition:opacity .25s ease;border-bottom:1px solid transparent;
}
.site-head.is-stuck::before{opacity:.82;border-bottom-color:var(--line)}
.site-head .container{position:relative;display:flex;align-items:center;gap:1.5rem;height:5rem}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:-.02em}
.brand__mark{
  width:2.3rem;height:2.3rem;border-radius:calc(var(--radius) * .5);background:var(--grad);
  display:grid;place-items:center;color:var(--on-primary);font-size:.78rem;font-weight:800;letter-spacing:.02em;
}
.brand__name{font-size:.98rem;line-height:1.15}
.brand__name small{display:block;font-size:.66rem;font-weight:500;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}
.nav{display:flex;gap:.35rem;margin-left:auto;align-items:center}
.nav a{
  padding:.5rem .8rem;border-radius:calc(var(--radius) * .45);font-size:.9rem;font-weight:500;
  color:var(--ink-dim);transition:color .16s ease,background .16s ease;
}
.nav a:hover{color:var(--ink);background:var(--primary-soft)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--ink);
  border-radius:calc(var(--radius) * .45);padding:.5rem .6rem;cursor:pointer}
@media (max-width:900px){
  .nav{
    position:fixed;inset:5rem 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:.75rem 1.25rem 1.25rem;
    transform:translateY(-130%);transition:transform .3s ease;margin:0;
  }
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:.85rem .5rem;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:.75rem}
  .nav-toggle{display:block}
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(4rem,10vw,8rem) var(--section-y);overflow:hidden}
.hero__inner{position:relative;z-index:2;max-width:56rem}
.hero h1{margin-bottom:1.1rem}
.hero h1 .grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--ink-dim);max-width:46rem;margin-bottom:2rem}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero__chips{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--card-bg);backdrop-filter:var(--card-blur);
  font-size:.82rem;color:var(--ink-dim);
}
.chip svg{width:.9rem;height:.9rem;color:var(--accent)}

.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* aurora */
.bg-aurora::before,.bg-aurora::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
}
.bg-aurora::before{width:46rem;height:46rem;top:-18rem;right:-12rem;background:var(--primary);animation:drift 22s ease-in-out infinite alternate}
.bg-aurora::after{width:34rem;height:34rem;top:6rem;left:-14rem;background:var(--accent);opacity:.32;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(4rem,3rem,0) scale(1.12)}}
/* grid */
.bg-grid{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}
.bg-grid::after{content:"";position:absolute;top:-20rem;left:50%;translate:-50% 0;width:52rem;height:40rem;
  background:var(--grad);filter:blur(120px);opacity:.28;border-radius:50%}
/* orbit */
.bg-orbit::before,.bg-orbit::after{
  content:"";position:absolute;top:50%;left:65%;translate:-50% -50%;border-radius:50%;
  border:1px solid var(--line-strong);
}
.bg-orbit::before{width:38rem;height:38rem;animation:spin 40s linear infinite}
.bg-orbit::after{width:26rem;height:26rem;border-style:dashed;animation:spin 28s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
/* dot matrix */
.bg-dots{
  background-image:radial-gradient(var(--primary-line) 1.2px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 70% 30%,#000 25%,transparent 80%);
  mask-image:radial-gradient(ellipse 75% 70% at 70% 30%,#000 25%,transparent 80%);
}
.bg-dots::after{content:"";position:absolute;top:-10rem;right:-6rem;width:40rem;height:32rem;
  background:var(--grad);filter:blur(110px);opacity:.22;border-radius:50%}
/* spotlight */
.bg-spotlight{overflow:hidden}
.bg-spotlight::before,.bg-spotlight::after{
  content:"";position:absolute;top:-30%;width:26rem;height:170%;
  background:linear-gradient(180deg,var(--primary),transparent 70%);
  opacity:.2;filter:blur(40px);transform-origin:top center;
}
.bg-spotlight::before{left:52%;rotate:24deg;animation:sweep 14s ease-in-out infinite alternate}
.bg-spotlight::after{left:72%;rotate:-18deg;background:linear-gradient(180deg,var(--accent),transparent 65%);
  opacity:.16;animation:sweep 18s ease-in-out infinite alternate-reverse}
@keyframes sweep{to{transform:rotate(14deg)}}

/* whole-page background: fixed behind all content, never scrolls */
.page-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
/* The hero fades its artwork out at the bottom; a full-page layer should not. */
.page-bg g[mask]{mask:none}
/* Even veil instead of the hero's left-side wash, so body text stays readable
   everywhere the artwork shows through. */
.page-bg.bg-svg::after{background:var(--bg);opacity:.5}
.page-bg.bg-dots,.page-bg.bg-grid{-webkit-mask-image:none;mask-image:none;opacity:.7}
.site-foot{position:relative}
body:has(.page-bg) .site-foot{background:color-mix(in srgb,var(--bg-2) 82%,transparent);backdrop-filter:blur(6px)}

/* ── stats ─────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--surface);padding:calc(var(--pad) * 1.5) var(--pad);text-align:center}
.stat__value{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat__label{font-size:.82rem;color:var(--ink-faint);margin-top:.5rem;letter-spacing:.04em}

/* ── service / tech grids ──────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--gap)}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.svc__badge{position:absolute;top:calc(var(--pad) * 1.5);right:calc(var(--pad) * 1.5)}
.svc details{margin-top:.85rem}
.svc summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--accent);list-style:none}
.svc summary::-webkit-details-marker{display:none}
.svc summary::after{content:" →";transition:margin .16s ease}
.svc details[open] summary::after{content:" ↑"}
.svc details p{margin-top:.7rem;font-size:.9rem;border-top:1px solid var(--line);padding-top:.7rem}

.radar{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--gap)}
.tech{position:relative;overflow:hidden}
.tech::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--grad);opacity:.85}
.tech__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.6rem}
.tech__cat{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.tech__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.85rem}
.tag{font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-faint)}
.stage-filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--gap)}
.stage-filter button{
  font:inherit;font-size:.82rem;font-weight:600;padding:.4rem .9rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-dim);transition:all .16s ease;
}
.stage-filter button:hover{border-color:var(--primary)}
.stage-filter button[aria-pressed="true"]{background:var(--grad);color:var(--on-primary);border-color:transparent}

/* ── partners marquee ──────────────────────────────────────────────────── */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:1rem;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.partner{
  display:grid;place-items:center;min-width:11rem;padding:1.1rem 1.5rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font-weight:600;font-size:.95rem;
  color:var(--ink-dim);letter-spacing:-.01em;transition:all .2s ease;
}
.partner:hover{color:var(--ink);border-color:var(--primary-line);background:var(--primary-soft)}

/* ── split / about ─────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:calc(var(--gap) * 1.6);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.about-body p{color:var(--ink-dim)}
.office{border-left:2px solid var(--primary-line);padding-left:1rem;margin-bottom:1.1rem}
.offices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);margin-top:var(--gap);align-items:start}
.offices__col h3{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;margin:0 0 1.1rem}
.offices__col h3 svg{width:1.1rem;height:1.1rem;color:var(--accent)}
.offices__branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));column-gap:1.25rem}
.office__kind{font-size:.74rem!important;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)!important;margin-bottom:.3rem!important}
@media (max-width:820px){.offices{grid-template-columns:1fr}}
.office h4{margin:0 0 .2rem;font-size:.95rem}
.office p{margin:0;font-size:.86rem;color:var(--ink-dim)}
.office a{color:var(--accent)}

/* ── forms ─────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-dim);letter-spacing:.01em}
.field .hint{font-size:.76rem;color:var(--ink-faint)}
input,select,textarea{
  font:inherit;font-size:.94rem;padding:.68rem .85rem;border-radius:calc(var(--radius) * .5);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
textarea{resize:vertical;min-height:7rem;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.field--row{grid-template-columns:1fr}}
.switch{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.88rem}
.switch input{width:2.6rem;height:1.45rem;appearance:none;background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:999px;position:relative;cursor:pointer;flex:none;transition:background .18s ease}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--ink-faint);transition:transform .18s ease,background .18s ease}
.switch input:checked{background:var(--primary);border-color:var(--primary)}
.switch input:checked::after{transform:translateX(1.13rem);background:#fff}
.alert{padding:.8rem 1rem;border-radius:calc(var(--radius) * .5);font-size:.88rem;margin-bottom:1rem;border:1px solid}
.alert--ok{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.35);color:var(--ok)}
.alert--err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:var(--danger)}
.alert--info{background:var(--primary-soft);border-color:var(--primary-line);color:var(--ink-dim)}

/* ── tables ────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:38rem}
th,td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-weight:700;
  background:var(--surface-2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--primary-soft)}
td .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;color:var(--accent)}

/* ── footer ────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding-block:calc(var(--section-y) * .55) 2rem;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h5{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin:0 0 .9rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot-grid a{font-size:.88rem;color:var(--ink-dim)}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-faint)}

/* ── reveal-on-scroll ──────────────────────────────────────────────────────
   Scoped to .js so that if the script fails to load the content is simply
   visible, rather than permanently transparent. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* ── brand artwork ─────────────────────────────────────────────────────── */
.brand--image{display:inline-flex;align-items:center;flex:none}
.brand--image img{
  display:block;object-fit:contain;
  /* The wordmark is drawn in brand blue and reads on any surface, but a hair
     of contrast lift keeps it crisp on the darkest backgrounds. */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
@media (max-width:520px){.brand--image img{height:30px!important}}

.btn svg{width:1.05rem;height:1.05rem;flex:none}

/* ── SVG hero backdrops (network / data centre) ────────────────────────────
   Every colour resolves from the theme tokens, so these re-tint automatically
   when the palette changes in the admin GUI. The global "animations off" rule
   and prefers-reduced-motion both neutralise the motion below. */
.bg-svg{overflow:hidden}
.bd{position:absolute;inset:0;width:100%;height:100%;display:block}
/* A wash behind the artwork keeps hero text contrast independent of the drawing */
.bg-svg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 56% 52% at 16% 34%,var(--bg) 26%,transparent 78%);
  opacity:.66;pointer-events:none;
}

/* 1. Network mesh */
.mesh__link{stroke:var(--primary);stroke-width:1.1;opacity:.26;
  stroke-dasharray:6 10;animation:bd-flow 7s linear infinite;animation-delay:calc(var(--i) * -.7s)}
.mesh__node{fill:var(--primary);opacity:.62;animation:bd-breathe 5s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.6s)}
.mesh__halo{fill:var(--accent);opacity:.15;animation:bd-ping 4.5s ease-out infinite;
  animation-delay:calc(var(--i) * -.9s)}
.mesh__core{fill:var(--accent);opacity:.85}
.mesh__packet{fill:var(--accent);opacity:.9;filter:drop-shadow(0 0 5px var(--accent))}

/* 2. Data centre */
.dc__frame{fill:var(--surface);stroke:var(--primary);stroke-width:1;opacity:.42}
.dc__unit{fill:var(--bg-2);stroke:var(--primary);stroke-width:.6;opacity:.5}
.dc__vent{fill:var(--primary);opacity:.22}
.dc__led{fill:var(--accent);animation:bd-blink 2.6s steps(1,end) infinite;
  animation-delay:calc(var(--i) * -.31s);filter:drop-shadow(0 0 3px var(--accent))}
.dc__rack{animation:bd-rise .9s ease-out both;animation-delay:calc(var(--i) * .08s)}
.dc__floor{stroke:var(--primary);stroke-width:.8;opacity:.13}
.dc__floorgroup{opacity:.9}

/* 3. Circuit */
.circuit__trace{fill:none;stroke:var(--primary);stroke-width:1.5;opacity:.22;
  stroke-linejoin:round;stroke-linecap:round}
.circuit__flow{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.55;
  stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:14 260;
  animation:bd-current 9s linear infinite;animation-delay:calc(var(--i) * -1.1s)}
.circuit__pad{fill:none;stroke:var(--primary);stroke-width:1.2;opacity:.3}
.circuit__via{fill:var(--accent);opacity:.55;animation:bd-breathe 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.8s)}

/* 4. Topology */
.topo__link{fill:none;stroke:var(--primary);stroke-width:1.3;opacity:.3;
  stroke-dasharray:5 9;animation:bd-flow 6s linear infinite;animation-delay:calc(var(--i) * -.5s)}
.topo__link--peer{stroke:var(--accent);opacity:.35;stroke-dasharray:none}
.topo__node{fill:var(--surface);stroke:var(--primary);stroke-width:1.4;opacity:.9}
.topo__node--access{fill:var(--bg-2);opacity:.75}
.topo__dot{fill:var(--accent);stroke:none;opacity:.9}

/* 5. Globe */
.globe__disc{fill:var(--primary-soft);stroke:var(--primary);stroke-width:1.2;opacity:.5}
.globe__line{fill:none;stroke:var(--primary);stroke-width:.9;opacity:.22}
.globe__arc{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.7;stroke-linecap:round;
  stroke-dasharray:6 8;animation:bd-flow 5s linear infinite;animation-delay:calc(var(--i) * -.6s)}
.globe__city{fill:var(--accent);filter:drop-shadow(0 0 4px var(--accent))}
.globe__ping{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.4;
  transform-box:fill-box;transform-origin:center;animation:bd-ping 3.6s ease-out infinite;
  animation-delay:calc(var(--i) * -.4s)}

/* 6. Signal waves */
.wave__line{fill:none;stroke:var(--primary);stroke-width:1.4;opacity:.28;
  animation:wave-drift 16s linear infinite;animation-delay:calc(var(--i) * -2.3s)}
.wave__line:nth-child(odd){stroke:var(--accent);opacity:.2}
.wave__ring{fill:none;stroke:var(--primary);stroke-width:1.2;opacity:.26;
  transform-box:fill-box;transform-origin:center;animation:bd-breathe 4s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.45s)}
.wave__src{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
@keyframes wave-drift{to{transform:translateX(calc(var(--len) * -1))}}

/* 7. Security shield */
.shield__hex{fill:none;stroke:var(--primary);stroke-width:1;opacity:.14}
.shield__hex--lit{fill:var(--primary-soft);opacity:.55;animation:bd-breathe 5s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.55s)}
.shield__body{fill:var(--primary-soft);stroke:var(--primary);stroke-width:2;opacity:.8;
  filter:drop-shadow(0 0 18px var(--primary))}
.shield__tick{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.shield__scan{fill:var(--accent);opacity:.35;filter:drop-shadow(0 0 10px var(--accent));
  animation:shield-scan 7s ease-in-out infinite}
@keyframes shield-scan{0%{transform:translateY(0)}50%{transform:translateY(690px)}100%{transform:translateY(0)}}

/* 8. Fibre optics */
.fibre__strand{fill:none;stroke:var(--primary);stroke-width:1.1;opacity:.18}
.fibre__pulse{fill:none;stroke:var(--accent);stroke-width:2;opacity:.8;stroke-linecap:round;
  stroke-dasharray:36 1500;filter:drop-shadow(0 0 4px var(--accent));
  animation:fibre-run 6s linear infinite;animation-delay:calc(var(--i) * -.55s)}
@keyframes fibre-run{from{stroke-dashoffset:1536}to{stroke-dashoffset:0}}

/* 9. Data stream */
.ds__bit{fill:var(--primary);font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.ds__col{opacity:.5;animation:ds-fall var(--s,9s) linear infinite;animation-delay:calc(var(--i) * -1s)}
.ds__col:nth-child(3n){opacity:.7}
.ds__col:nth-child(3n) .ds__bit{fill:var(--accent)}
@keyframes ds-fall{from{transform:translateY(-120px)}to{transform:translateY(900px)}}

@keyframes bd-flow{to{stroke-dashoffset:-160}}
@keyframes bd-current{to{stroke-dashoffset:-1096}}
@keyframes bd-breathe{0%,100%{opacity:.28}50%{opacity:.7}}
@keyframes bd-ping{0%{transform:scale(.6);opacity:.28}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes bd-blink{0%,44%{opacity:.22}45%,100%{opacity:.95}}
@keyframes bd-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Halos scale about their own centre rather than the SVG origin */
.mesh__halo,.mesh__hub{transform-box:fill-box;transform-origin:center}
.dc__rack{transform-box:fill-box;transform-origin:center bottom}