@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --graphite:#1B2027;
  --graphite-2:#2B3340;
  --paper:#F4F5F7;
  --paper-2:#FFFFFF;
  --steel:#8B93A1;
  --steel-line: rgba(27,32,39,0.10);
  --steel-line-strong: rgba(27,32,39,0.18);
  --blue:#1E5FA8;
  --blue-dark:#123E6E;
  --blue-tint:#EAF2FB;
  --green:#3E8464;
  --green-tint:#EAF4EF;
  --headline: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'Roboto Mono', monospace;
  --r-sm: 4px;
  --r-md: 10px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  background: var(--paper);
  color: var(--graphite);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width: 1180px; margin: 0 auto; padding: 0 32px;}
@media(max-width:720px){.wrap{padding:0 20px;}}

/* subtle blueprint grid, used behind hero only */
.grid-field{
  background-image:
    linear-gradient(var(--steel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* ===== HEADER ===== */
header{
  position: sticky; top:0; z-index: 50;
  background: rgba(244,245,247,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--steel-line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height: 80px; }
.brand{ font-family: var(--headline); font-weight:700; font-size: 19px; letter-spacing: -0.01em; display:flex; align-items:baseline; gap:7px; }
.brand span{color:var(--blue);}
.brand small{font-family:var(--mono); font-weight:400; font-size:10.5px; color:var(--steel); letter-spacing:0.04em;}
.navlinks{display:flex; gap: 8px; font-size:14px; font-weight:500;}
.navlinks a{
  color: var(--graphite-2); padding:9px 14px; border-radius: var(--r-sm);
  position:relative; transition: color 0.15s ease, background 0.15s ease;
}
.navlinks a:hover{background: var(--paper-2); color:var(--blue);}
.navlinks a.active{color:var(--blue); background:var(--blue-tint); font-weight:600;}
.navright{display:flex; align-items:center; gap:14px;}
.navcta{
  border:1px solid var(--graphite); padding:10px 20px; font-size:13.5px; font-weight:600;
  font-family: var(--headline); border-radius: var(--r-sm); transition: all 0.15s ease;
}
.navcta:hover{background:var(--graphite); color:var(--paper); transform: translateY(-1px);}
.navburger{display:none; flex-direction:column; justify-content:center; gap:5px; width:28px; height:28px; background:none; border:none; cursor:pointer; padding:0;}
.navburger span{display:block; width:100%; height:2px; background:var(--graphite); transition:transform 0.2s ease, opacity 0.2s ease;}
.navburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navburger.open span:nth-child(2){opacity:0;}
.navburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:900px){
  .navlinks{
    display:none; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--paper);
    border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line);
    box-shadow: 0 10px 24px rgba(27,32,39,0.08); padding:8px 0;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 32px; border-radius:0;}
  .navburger{display:flex;}
}

/* ===== HERO (shared shell, content differs per page) ===== */
.pagehero{ padding: 64px 0 56px; position:relative; overflow:hidden; }
.eyebrow{
  font-family:var(--mono); font-size:12.5px; color: var(--blue); letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px; margin-bottom: 20px;
}
.eyebrow .dash{width:26px; height:1px; background:var(--blue);}
h1{
  font-family: var(--headline); font-weight:700;
  font-size: clamp(32px, 4.2vw, 50px); line-height:1.08; letter-spacing:-0.015em;
}
h1.tight{max-width:16ch;}
.pagehero p.lead{ margin-top:20px; font-size:16.5px; color:var(--graphite-2); max-width:50ch; }
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn-primary{
  background:var(--blue); color:#fff; padding:14px 24px; font-weight:600; font-size:14px;
  font-family:var(--headline); border-radius: var(--r-sm); border:none; cursor:pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover{background:var(--blue-dark); transform: translateY(-1px);}
.btn-secondary{
  border:1px solid var(--steel-line-strong); padding:14px 24px; font-weight:600; font-size:14px;
  font-family: var(--headline); border-radius: var(--r-sm); background: var(--paper-2);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.btn-secondary:hover{border-color: var(--graphite); transform: translateY(-1px);}

.hero-stats{display:flex; gap:32px; margin-top:44px; padding-top:22px; border-top:1px solid var(--steel-line); flex-wrap:wrap;}
.stat b{font-family:var(--mono); font-size:24px; font-weight:500; display:block;}
.stat span{font-size:12px; color:var(--steel);}

.hero-split{display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items:center;}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;}}

.diagram-box{
  position:relative; background: var(--paper-2); border:1px solid var(--steel-line);
  border-radius: var(--r-md); padding: 28px; aspect-ratio: 1/1;
  box-shadow: 0 1px 0 rgba(27,32,39,0.03);
}
.diagram-box svg{width:100%; height:100%;}
.diagram-photo-shadow{
  width:100%; height:100%;
  filter: drop-shadow(0 28px 46px rgba(27,32,39,0.22)) drop-shadow(0 8px 18px rgba(30,95,168,0.28)) drop-shadow(0 2px 6px rgba(27,32,39,0.12));
}
.diagram-photo-wrap{
  position:relative; width:100%; height:100%; border-radius:calc(var(--r-md) - 4px); overflow:hidden;
}
.diagram-photo{
  width:100%; height:100%; object-fit:contain; display:block; background:var(--paper-2);
}
.diagram-caption{ font-family: var(--mono); font-size:11px; color:var(--steel); margin-top:12px; text-align:right; }

/* entrance, hero only */
.reveal{opacity:0; transform: translateY(14px); animation: rise 0.6s ease forwards;}
.reveal.d1{animation-delay:0.05s;}
.reveal.d2{animation-delay:0.15s;}
.reveal.d3{animation-delay:0.25s;}
@keyframes rise{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.reveal{animation:none; opacity:1; transform:none;}}

/* ===== SECTION HEADERS ===== */
.section{padding: 88px 0;}
.section.tight{padding:64px 0;}
.section-head{
  display:grid; grid-template-columns: 1fr 1.3fr; gap:40px; margin-bottom: 48px;
  border-top: 1px solid var(--graphite); padding-top: 18px;
}
@media(max-width:800px){.section-head{grid-template-columns:1fr;}}
.section-num{font-family:var(--mono); font-size:12.5px; color:var(--blue);}
h2{ font-family: var(--headline); font-weight:700; font-size: clamp(25px,3vw,34px); line-height:1.12; margin-top:8px; }
.section-head p{color:var(--graphite-2); font-size:14.5px; align-self:end; max-width:48ch;}

/* ===== CATEGORY GRID ===== */
.cat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background: var(--steel-line); border:1px solid var(--steel-line); border-radius: var(--r-md); overflow:hidden; }
@media(max-width:800px){.cat-grid{grid-template-columns: 1fr 1fr;}}
@media(max-width:520px){.cat-grid{grid-template-columns: 1fr;}}
.cat{
  background: var(--paper-2); min-height: 196px; padding:28px 24px;
  display:flex; flex-direction:column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cat-photo{width:100%; height:150px; object-fit:cover; display:block; border-radius:8px;}
.cat-body{padding:16px 0 0 0; display:flex; flex-direction:column; justify-content:space-between; flex:1;}
.cat:hover{ transform: translateY(-3px); box-shadow: 0 6px 20px rgba(27,32,39,0.06); }
.cat-letter{ font-family:var(--headline); font-size:12.5px; color:var(--blue); font-weight:700; background:var(--blue-tint); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; }
.cat h3{ font-family: var(--headline); font-size:18px; font-weight:600; margin-top:16px; line-height:1.2; }
.cat p{font-size:13.5px; color:var(--graphite-2); margin-top:9px;}
.cat .cat-link{font-size:13px; color:var(--blue); margin-top:16px; font-weight:600;}
.cat.linkable{cursor:pointer;}

/* ===== SPEC TABLE ===== */
.spec-wrap{border:1px solid var(--steel-line); border-radius: var(--r-md); overflow:hidden; overflow-x:auto; background:var(--paper-2);}
table.spec{width:100%; border-collapse:collapse; min-width: 640px;}
table.spec th, table.spec td{ padding: 14px 20px; text-align:left; border-bottom:1px solid var(--steel-line); font-size:14px; }
table.spec th{ font-family: var(--mono); font-weight:500; font-size:11.5px; color:var(--steel); border-bottom:1px solid var(--steel-line-strong); background:var(--paper); text-transform:none; }
table.spec td.num{font-family:var(--mono); font-size:13.5px;}
table.spec tr:last-child td{border-bottom:none;}
table.spec tr:hover td{background: var(--paper);}
.model-name{font-weight:600;}
.model-sub{font-size:12px; color:var(--steel); display:block; margin-top:2px;}

/* ===== CERT STRIP ===== */
.cert-strip{ display:flex; flex-wrap:wrap; border:1px solid var(--steel-line); border-radius:var(--r-md); overflow:hidden; background:var(--paper-2);}
.cert{ flex:1; min-width:200px; padding: 24px 22px; border-right:1px solid var(--steel-line); display:flex; align-items:center; gap:14px; }
.cert:last-child{border-right:none;}
.cert-mark{ width:36px; height:36px; background: var(--green-tint); color:var(--green); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:600; flex-shrink:0; }
.cert-text b{display:block; font-size:13.5px; font-weight:600;}
.cert-text span{font-size:12px; color:var(--steel);}
@media(max-width:700px){.cert-strip{flex-direction:column;} .cert{border-right:none; border-bottom:1px solid var(--steel-line);}}

/* ===== CASE / DARK BLOCK ===== */
.case{ background: var(--graphite); color: var(--paper); padding: 64px 12px; border-radius: var(--r-md); }
.case-inner{display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:center;}
@media(max-width:800px){.case-inner{grid-template-columns:1fr;}}
.case .eyebrow{color:#8FB6DD;}
.case .eyebrow .dash{background:#8FB6DD;}
.case h2{color:#fff;}
.case p.lead{color:#C6CBD3; margin-top:16px; font-size:15px; max-width:52ch;}
.case-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#39424F; margin-top:30px; border-radius: var(--r-sm); overflow:hidden;}
.case-metric{background:var(--graphite); padding:18px 16px;}
.case-metric b{font-family:var(--mono); font-size:22px; color:#fff; display:block;}
.case-metric span{font-size:11px; color:#9AA2AF;}
.case-quote{ border-left:2px solid var(--blue); padding-left:22px; font-size:15.5px; color:#E4E7EB; line-height:1.65; }
.case-quote footer{margin-top:14px; font-size:12.5px; color:#9AA2AF;}

/* ===== TEAM / PROJECT LIST (proekti page) ===== */
.proj-list{display:flex; flex-direction:column; border-top:1px solid var(--steel-line-strong);}
.proj{ display:grid; grid-template-columns: 140px 1fr 200px; gap:24px; padding: 26px 4px; border-bottom:1px solid var(--steel-line); align-items:center; transition: background 0.15s ease;}
.proj:hover{background: var(--paper-2);}
@media(max-width:700px){.proj{grid-template-columns:1fr; gap:8px;}}
.proj-year{font-family:var(--mono); font-size:13px; color:var(--steel);}
.proj-name{font-family:var(--headline); font-size:17px; font-weight:600;}
.proj-desc{font-size:13.5px; color:var(--graphite-2); margin-top:4px;}
.proj-tag{font-size:12px; color:var(--blue); background:var(--blue-tint); padding:6px 12px; border-radius:20px; font-weight:600; justify-self:end; white-space:nowrap;}

/* ===== FEATURES (automation page) ===== */
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background: var(--steel-line); border:1px solid var(--steel-line); border-radius: var(--r-md); overflow:hidden; }
@media(max-width:800px){.feature-grid{grid-template-columns: 1fr 1fr;}}
@media(max-width:520px){.feature-grid{grid-template-columns: 1fr;}}
.feature{ background: var(--paper-2); padding: 28px 24px; display:flex; flex-direction:column; gap:14px; }
.feature-icon{ width:38px; height:38px; border-radius:8px; background: var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; }
.feature-icon svg{width:20px; height:20px;}
.feature h3{font-family:var(--headline); font-size:16.5px; font-weight:600;}
.feature p{font-size:13.5px; color:var(--graphite-2);}

.step-list{ display:flex; flex-direction:column; border-top:1px solid var(--steel-line-strong); margin-top:8px; }
.step-row{ display:grid; grid-template-columns: 60px 1fr; gap:20px; padding: 22px 4px; border-bottom:1px solid var(--steel-line); }
.step-num{font-family:var(--mono); font-size:13px; color:var(--blue);}
.step-row h4{font-family:var(--headline); font-size:15.5px; font-weight:600; margin-bottom:4px;}
.step-row p{font-size:13.5px; color:var(--graphite-2);}

/* ===== CONTACT ===== */
.contact-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media(max-width:800px){.contact-split{grid-template-columns:1fr; gap:36px;}}
.contact-form{border:1px solid var(--steel-line); padding: 32px; border-radius: var(--r-md); background:var(--paper-2);}
.field{margin-bottom:18px;}
.field label{font-size:12.5px; font-weight:600; display:block; margin-bottom:7px; color:var(--graphite-2);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--steel-line-strong); background:#fff; padding:12px 14px; font-size:14px;
  font-family:var(--body); color:var(--graphite); border-radius: var(--r-sm);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue-tint); border-color:var(--blue);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:480px){.field-row{grid-template-columns:1fr;}}
.submit-btn{
  width:100%; background:var(--blue); color:#fff; padding:15px; font-weight:600; font-size:14px;
  border:none; font-family:var(--headline); cursor:pointer; border-radius: var(--r-sm);
  transition: background 0.15s ease;
}
.submit-btn:hover{background:var(--blue-dark);}
.contact-info h3{font-family:var(--headline); font-size:21px; font-weight:600; margin-bottom:14px;}
.contact-info p{color:var(--graphite-2); font-size:14.5px; max-width:42ch;}
.info-list{margin-top:28px; display:flex; flex-direction:column; gap:16px;}
.info-item{display:flex; gap:16px; padding-top:16px; border-top:1px solid var(--steel-line);}
.info-item b{display:block; font-size:14px; font-weight:600;}
.info-item span{font-size:13px; color:var(--steel);}
.info-item .num{font-family:var(--mono); font-size:13px; color:var(--steel); flex-shrink:0; width:26px;}
.map-box{ margin-top:28px; border:1px solid var(--steel-line); border-radius: var(--r-md); aspect-ratio: 16/9; background: var(--paper-2); display:flex; align-items:center; justify-content:center; }

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--steel-line-strong); padding: 36px 0; background: var(--paper-2); margin-top: 20px;}
.foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.foot-inner .brand{font-size:15px;}
.foot-links{display:flex; gap:26px; font-size:13px; color:var(--graphite-2);}
.foot-links a:hover{color:var(--blue);}
.foot-copy{font-size:11.5px; color:var(--steel); font-family:var(--mono);}

/* ===== PROJECT ACCORDION ===== */
.proj-acc{border-bottom:1px solid var(--steel-line);}
.proj-acc summary{
  list-style:none; cursor:pointer; display:grid;
  grid-template-columns: 140px 70px 1fr 160px 28px; gap:24px; padding: 26px 4px; align-items:center;
  transition: background 0.15s ease;
}
.proj-acc summary::-webkit-details-marker{display:none;}
.proj-acc summary:hover{background: var(--paper-2);}
.proj-chevron{
  justify-self:end; width:26px; height:26px; border-radius:50%; border:1px solid var(--steel-line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--steel); font-family:var(--mono);
  font-size:15px; transition: transform 0.2s ease, color 0.15s ease, border-color 0.15s ease; flex-shrink:0;
}
.proj-acc[open] .proj-chevron{transform: rotate(45deg); color:var(--blue); border-color:var(--blue);}
@media(max-width:700px){.proj-acc summary{grid-template-columns: 1fr 28px;}}
.proj-panel{padding: 0 4px 32px;}
.proj-panel p{font-size:13.5px; color:var(--graphite-2); max-width:70ch;}
.proj-gallery{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:16px;}
.proj-gallery img{width:100%; height:150px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--steel-line); background:var(--paper);}
@media(max-width:700px){.proj-gallery{grid-template-columns:repeat(2, 1fr);}}
.proj-website{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:13.5px; font-weight:600;
  color:var(--blue); font-family:var(--headline);
}
.proj-website:hover{color:var(--blue-dark);}
.proj-note{font-size:12.5px; color:var(--steel); margin-top:14px;}

/* ===== CONTACT FORM STATE ===== */
.submit-btn:disabled{opacity:0.6; cursor:not-allowed;}
.form-msg{display:none; padding:14px 16px; border-radius:var(--r-sm); font-size:13.5px; font-weight:500; margin-top:14px;}
.form-msg.show{display:block;}
.form-msg.success{background:#E5F3EB; color:#1E6B3C; border:1px solid #BEE3CB;}
.form-msg.error{background:#FBEAEA; color:#A3312B; border:1px solid #F2C6C4;}

/* ===== HERO BLUEPRINT DRAW-IN ANIMATION ===== */
.diagram-box{overflow:hidden;}
.diagram-box svg .draw{ animation-name: draw-stroke; animation-timing-function: cubic-bezier(0.65,0,0.35,1); animation-fill-mode: forwards; }
@keyframes draw-stroke{ to{ stroke-dashoffset:0; } }
.diagram-box svg .fade{ opacity:0; animation-name: fade-in-el; animation-timing-function: ease; animation-fill-mode: forwards; animation-duration:0.5s; }
@keyframes fade-in-el{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .diagram-box svg .draw, .diagram-box svg .fade{
    animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; transform:none !important;
  }
}

/* ===== HERO PCB CIRCUIT BACKGROUND ===== */
.pagehero > .wrap{ position:relative; z-index:1; }
.pcb-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.pcb-bg .pcb-trace{ fill:none; stroke:var(--blue); stroke-width:1; opacity:0.14; stroke-linejoin:round; }
.pcb-bg .pcb-trace.flow{ stroke-dasharray:4 10; opacity:0.32; animation: pcb-flow 2.2s linear infinite; }
@keyframes pcb-flow{ to{ stroke-dashoffset:-28; } }
.pcb-bg .pcb-pad{ fill:var(--blue); opacity:0.3; }
.pcb-bg .pcb-pad.active{ animation: pcb-pad-glow 2.8s ease-in-out infinite; }
@keyframes pcb-pad-glow{ 0%,100%{ opacity:0.22; } 50%{ opacity:0.65; } }
.pcb-bg .pcb-chip-body{ fill:var(--paper-2); stroke:var(--blue); stroke-width:1.1; opacity:0.4; }
.pcb-bg .pcb-chip-pin{ stroke:var(--blue); stroke-width:1; opacity:0.3; }
.pcb-bg .pcb-chip-core{ fill:var(--blue); opacity:0.55; animation: pcb-core-pulse 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes pcb-core-pulse{ 0%,100%{ opacity:0.4; transform:scale(1);} 50%{ opacity:0.8; transform:scale(1.25);} }
@media (max-width:900px){ .pcb-bg{ opacity:0.55; } }
@media (prefers-reduced-motion: reduce){
  .pcb-bg .pcb-trace.flow, .pcb-bg .pcb-pad.active, .pcb-bg .pcb-chip-core{ animation:none !important; }
}

/* ===== HERO DATA-FLOW / AI SYNC BACKGROUND ===== */
.dataflow-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.df-cluster{ transform-box: view-box; transform-origin: 600px 250px; }
@media(max-width:900px){ .dataflow-bg{ display:none; } }
.dataflow-bg .df-machine{ fill:var(--paper-2); stroke:var(--blue); stroke-width:1.1; opacity:0.12; }
.dataflow-bg .df-icon{ stroke:var(--blue); stroke-width:1.3; fill:none; opacity:0.16; stroke-linecap:round; stroke-linejoin:round; }
.dataflow-bg .df-line{ stroke:var(--blue); stroke-width:1; opacity:0.05; fill:none; }
.dataflow-bg .df-packet{ fill:var(--blue); opacity:0.28; }
.dataflow-bg .df-panel-body{ fill:var(--paper-2); stroke:var(--blue); stroke-width:1.2; opacity:0.18; filter:drop-shadow(0 2px 8px rgba(30,95,168,0.05)); }
.dataflow-bg .df-panel-line{ stroke:var(--blue); stroke-width:1; opacity:0.11; }
.dataflow-bg .df-panel-label{ font-family:var(--headline); font-weight:700; font-size:19px; letter-spacing:0.02em; fill:var(--blue); opacity:0.25; }
.dataflow-bg .df-core{ fill:var(--blue); opacity:0.6; animation: df-core-pulse 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes df-core-pulse{ 0%,100%{ opacity:0.15; transform:scale(1);} 50%{ opacity:0.3; transform:scale(1.3);} }
.dataflow-bg .df-ring{ fill:none; stroke:var(--blue); stroke-width:1.1; opacity:0; animation: df-ring-ping 2.6s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes df-ring-ping{ 0%{ opacity:0.16; transform:scale(0.4);} 100%{ opacity:0; transform:scale(2.8);} }
@media (prefers-reduced-motion: reduce){
  .dataflow-bg .df-packet{ display:none; }
  .dataflow-bg .df-core, .dataflow-bg .df-ring{ animation:none !important; }
}