/* =========================================================================
   Mashalakh Mamedov, engineering portfolio
   Ported from review/DESIGN_2026-08-25/PROTOTYPE_template.html, 25 Aug 2026.
   Authority: review/DESIGN_2026-08-25/FINAL_DESIGN_RULES.md.

   Dark only, one palette, no light mode (section 3).
   No @font-face, no @import, no CDN: the page must load with zero network
   requests (section 2). IBM Plex is named first and falls back to the system
   stack where it is not installed.
   ========================================================================= */

:root{
  --bg:#0D0F12; --panel:#14171C; --panel-2:#1A1E24;
  --ink:#F2F1EE; --ink-2:#A8AEB8; --ink-3:#868D99;
  --rule:#242931; --rule-2:#333942; --accent:#F0793C; --accent-dim:#8A4520;

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Grid and flex items default to a min-content minimum, so one wide figure or one long unbroken
   string sets the floor for its whole track and pushes the document wider than the viewport.
   Every flexible track below is declared minmax(0,1fr); this is the matching half of that fix. */
.hero>*,.skillgrid>*,.job>*,.xp>*,.contact>*,.pbody>*,.two>*,.jb>*,.hd>*{min-width:0}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
a{color:inherit}
img{max-width:100%}
figure{margin:0}

.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;
  background:var(--accent);color:#140A04;font-size:14px;font-weight:500;border-radius:0 0 2px 0}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- MASTHEAD ---------- */
header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--bg);z-index:30}
.hd{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px;flex-wrap:wrap}
.brand{font-weight:600;font-size:16.5px;letter-spacing:-.01em;text-decoration:none}
.brand span{color:var(--accent);font-family:var(--mono);margin-right:8px;font-size:14px}
nav{display:flex;gap:20px;font-size:14px;color:var(--ink-2)}
nav a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}

.navtoggle{display:none;background:none;border:1px solid var(--rule-2);border-radius:2px;
  padding:9px 11px;cursor:pointer;color:var(--ink-2)}
.navtoggle__bars,.navtoggle__bars::before,.navtoggle__bars::after{
  display:block;width:17px;height:1.5px;background:currentColor;content:""}
.navtoggle__bars::before{transform:translateY(-5px)}
.navtoggle__bars::after{transform:translateY(3.5px)}

/* ---------- HERO ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:60px;align-items:center;
  padding:74px 0 66px;border-bottom:1px solid var(--rule)}
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;margin:0}
.hero h1{font-size:clamp(38px,5vw,60px);margin:0 0 24px;line-height:1.03}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.avail{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12px;color:var(--ink-2);border:1px solid var(--rule-2);border-radius:2px;
  padding:7px 13px;margin:0 0 24px;letter-spacing:.02em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 18px;border-radius:2px;text-decoration:none;
  font-size:14px;font-weight:500;border:1px solid var(--accent);background:var(--accent);color:#140A04}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.pfp{margin:0}
/* height:auto is load-bearing. The img carries width="800" height="800" attributes as
   presentational hints; without this the 800px height survives, aspect-ratio is ignored because
   both dimensions are then specified, and object-fit crops the square portrait into a tall strip. */
.pfp img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:3px;display:block;
  border:1px solid var(--rule-2)}

/* ---------- HOME SECTIONS ---------- */
.sec{padding:60px 0;border-bottom:1px solid var(--rule)}
.sech{display:flex;align-items:baseline;gap:15px;margin-bottom:8px}
.sech h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:0;letter-spacing:-.01em}
.sech .n{font-family:var(--mono);font-size:11.5px;color:var(--accent)}
.sech .rule{flex:1;height:1px;background:var(--rule)}
.sechelp{font-size:14.5px;color:var(--ink-3);margin:0 0 26px}

/* About: one column, 45 to 75 character measure, generous leading */
.about{display:block;max-width:64ch}
.about p{font-size:17px;line-height:1.75;color:var(--ink-2);margin:0 0 20px;max-width:64ch}
.about p:last-child{margin-bottom:0}
.about p b{color:var(--ink);font-weight:600}

/* Project cards: text only. No thumbnails on the homepage (section 7). */
.pcard{display:block;border:1px solid var(--rule);border-radius:3px;background:var(--panel);
  margin-bottom:16px;text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s}
.pcard:hover{border-color:var(--accent);background:var(--panel-2)}
.pcard .txt{padding:26px 30px;display:block}
.pcard .rn{display:inline-block;font-family:var(--mono);font-size:11.5px;
  color:var(--accent);margin:0 14px 0 0;vertical-align:top}
.pcard .rk{display:inline-block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pcard h3{font-size:21px;font-weight:600;margin:10px 0;letter-spacing:-.01em}
.pcard:hover h3{color:var(--accent)}
.pcard p{margin:0 0 16px;font-size:15px;color:var(--ink-2);line-height:1.62;max-width:62ch}
.rres{font-family:var(--mono);font-size:12.5px;color:var(--ink);
  border-left:2px solid var(--accent);padding-left:12px;line-height:1.5;margin:0 0 16px}
.rres em{display:block;font-style:normal;font-family:var(--sans);
  font-size:11.5px;color:var(--ink-3);margin-top:3px}
.tools{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tool{font-family:var(--mono);font-size:11px;color:var(--ink-2);
  border:1px solid var(--rule-2);border-radius:2px;padding:4px 9px;background:var(--bg);
  white-space:nowrap}
.more{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.pcard:hover .more{color:var(--accent)}

/* Skills */
.skillgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 42px}
.sk{padding:20px 0;border-bottom:1px dotted var(--rule)}
.sk h3{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);margin:0 0 8px;font-weight:500}
.sk p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.skillgrid .sk:nth-last-child(-n+2){border-bottom:none;padding-bottom:0}
.sec#skills{padding-bottom:52px}

/* Experience */
.job{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 30px;padding:26px 0;border-top:1px solid var(--rule)}
.jw{display:flex;flex-direction:column;gap:5px}
.jd{font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.jl{font-size:12.5px;color:var(--ink-3)}
.jb h3{font-size:18px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.jorg{font-size:14.5px;color:var(--ink-2);margin-bottom:12px}
.jb ul{margin:0;padding-left:18px}
.jb li{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:7px;max-width:64ch}
.other{margin-top:40px;padding-top:30px;border-top:1px solid var(--rule)}
.mini{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
.xp{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 28px}
.xp .when{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  padding:16px 0;border-top:1px solid var(--rule)}
.xp .what{padding:16px 0;border-top:1px solid var(--rule)}
.xp .what strong{display:block;font-size:15.5px;font-weight:600;margin-bottom:2px}
.xp .what span{font-size:14px;color:var(--ink-2)}
.xp .what .org{display:block}
.xp .what .edunote{font-size:14px;color:var(--ink-2);line-height:1.55;margin:6px 0 0;max-width:62ch}
.xp .what .verify{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim);
  white-space:nowrap}
.xp .what .verify:hover{border-bottom-color:var(--accent)}
.mut{color:var(--ink-3);font-size:13px}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:50px;align-items:start}
.clede{font-size:17px;color:var(--ink-2);line-height:1.65;margin:0 0 24px;max-width:46ch}
.cdet{margin:0;border:1px solid var(--rule);background:var(--panel);border-radius:2px;padding:6px 22px}
.cdet div{padding:14px 0;border-bottom:1px dotted var(--rule);display:flex;gap:16px;align-items:baseline}
.cdet div:last-child{border-bottom:none}
.cdet dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);width:78px;flex:none}
/* The email address and the LinkedIn URL are single unbreakable tokens wider than a 320 px
   viewport. Without this they set the page's minimum width and the whole document scrolls. */
.cdet dd{margin:0;font-size:14.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.lnk{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.lnk:hover{border-bottom-color:var(--accent)}

/* ---------- PROJECT PAGE ---------- */
.back{font-family:var(--mono);font-size:12px;color:var(--ink-3);
  text-decoration:none;display:inline-block;margin:34px 0 26px}
.back:hover{color:var(--accent)}
.phead{border-bottom:1px solid var(--rule);padding-bottom:34px}
.pk{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.phead h1{font-size:clamp(29px,4vw,42px);margin:0 0 20px}
.lede{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0;max-width:62ch}
.lede b{color:var(--ink);font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);border-radius:2px;
  background:var(--panel);margin:22px 0 0}
.meta div{padding:12px 18px;border-right:1px solid var(--rule);flex:1 1 auto;min-width:150px}
.meta div:last-child{border-right:none}
.meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.meta dd{margin:0;font-size:13.5px;color:var(--ink)}

.pbody{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.blk{padding:46px 0;border-bottom:1px solid var(--rule)}
.blk h2{font-family:var(--serif);font-size:21px;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
.blk p{font-size:16px;color:var(--ink-2);margin:0 0 14px;max-width:62ch;line-height:1.65}
.blk p:last-child{margin-bottom:0}
.blk p b{color:var(--ink);font-weight:600}
.mono{font-family:var(--mono);font-weight:500;color:var(--ink)}

figcaption{font-family:var(--mono);font-size:11px;line-height:1.55;
  color:var(--ink-3);margin-top:9px;display:flex;gap:9px;max-width:64ch}
figcaption .fig{color:var(--accent);white-space:nowrap}
.figcredit{color:var(--ink-3)}
.hfig{margin:0}
.hfig img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--panel)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}

.callout{border:1px solid var(--accent-dim);background:var(--panel);border-left:3px solid var(--accent);
  padding:18px 22px;border-radius:2px}
.callout .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);margin:0 0 7px;max-width:none}
.callout p{margin:0;color:var(--ink);font-size:15.5px;max-width:64ch}

.limits{list-style:none;padding:0;margin:0}
.limits li{padding:11px 0 11px 22px;border-bottom:1px dotted var(--rule);font-size:15px;
  color:var(--ink-2);position:relative;max-width:62ch}
.limits li:last-child{border-bottom:none}
.limits li::before{content:"\00B7";position:absolute;left:0;color:var(--accent)}

.codewrap{margin:0;border:1px solid var(--rule);border-radius:2px;background:var(--panel);overflow:hidden}
.codehd{display:flex;justify-content:space-between;gap:14px;padding:9px 16px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.codehd b{color:var(--accent);font-weight:500}
pre{margin:0;padding:18px 16px;overflow-x:auto;font-family:var(--mono);
  font-size:12.5px;line-height:1.72;color:var(--ink);tab-size:2}
pre .c{color:var(--ink-3)}
pre .k{color:var(--accent)}

/* Results table. Scrolls inside its own box so it can never widen the page. */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:2px;background:var(--panel)}
.tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dtable{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.dtable th,.dtable td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--rule);
  white-space:nowrap}
.dtable thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;background:var(--panel-2)}
.dtable tbody th{font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:500}
.dtable td{color:var(--ink-2)}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:none}
.tnote{font-size:13px;color:var(--ink-3);margin:10px 0 0;max-width:62ch}

.videowrap{margin:0 0 6px;border:1px solid var(--rule);border-radius:2px;overflow:hidden;background:#07090B}
.videowrap video{width:100%;height:auto;display:block}

.nextp{display:flex;justify-content:space-between;align-items:center;padding:34px 0 70px;gap:20px;flex-wrap:wrap}
.nextp a{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-decoration:none}
.nextp a:hover{color:var(--accent)}

/* ---------- FOOTER ---------- */
footer{padding:40px 0 56px;font-size:13.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:18px 26px;flex-wrap:wrap;
  border-top:1px solid var(--rule)}
.footlinks{display:flex;gap:18px;flex-wrap:wrap}
.footlegal{flex:1 1 100%;margin:6px 0 0;font-size:12.5px;line-height:1.6;max-width:64ch;color:var(--ink-3)}

/* ---------- BREAKPOINT: one, at 820 px (section 11) ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);gap:34px;padding:52px 0 46px}
  .pfp{max-width:170px;order:-1}
  .about p{font-size:16px}
  .skillgrid,.contact{grid-template-columns:minmax(0,1fr);gap:0}
  .contact{gap:32px}
  .skillgrid .sk:nth-last-child(-n+2){border-bottom:1px dotted var(--rule);padding-bottom:20px}
  .job{grid-template-columns:minmax(0,1fr);gap:10px}
  .xp{grid-template-columns:minmax(0,1fr)}
  .xp .when{padding:14px 0 0}
  .xp .what{padding:3px 0 14px;border-top:none}
  .two{grid-template-columns:minmax(0,1fr);gap:24px}

  /* Progressive enhancement. Without JavaScript the toggle can never open anything, so it must not
     appear and the navigation must not be hidden behind it. The .js class is set by an inline
     script in <head>, before first paint, so there is no flash. */
  .js .navtoggle{display:block;order:2}
  nav{order:3;flex:1 1 100%;flex-direction:column;gap:0;
    border-top:1px solid var(--rule);margin-top:4px}
  .js nav{display:none}
  nav a{padding:12px 0;border-bottom:1px solid var(--rule)}
  nav a:hover{border-bottom-color:var(--rule)}
  .js .hd[data-open="true"] nav{display:flex}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- PRINT ----------
   A recruiter will save this to PDF. Dark backgrounds waste ink and read badly on paper, the
   navigation is meaningless in print, and cards must not split across a page break. */
@media print{
  :root{
    --bg:#FFFFFF; --panel:#FFFFFF; --panel-2:#FFFFFF;
    --ink:#000000; --ink-2:#1F2328; --ink-3:#4A5058;
    --rule:#C9CDD3; --rule-2:#B0B5BC; --accent:#9A3F0E; --accent-dim:#9A3F0E;
  }
  html,body{background:#FFFFFF !important;color:#000 !important;font-size:11pt}
  @page{margin:14mm}
  header,.navtoggle,nav,.skip-link,.btns,.pnav,.back,.more{display:none !important}
  body::before,body::after,.sec::before,.sec::after,.blk::before,.blk::after{
    display:none !important;background:none !important}
  *{background-image:none !important;box-shadow:none !important}
  .wrap{max-width:100%;padding:0}
  .sec,.blk{padding:14pt 0;break-inside:auto}
  .hero{padding:0 0 12pt;gap:18pt}
  .pfp{max-width:34mm}
  .pcard,.callout,.codewrap,.facts,.cdet,.job,figure{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .pcard{border:1px solid var(--rule);margin-bottom:10pt}
  a{text-decoration:none;color:#000}
  .lnk::after,.footlinks a::after{content:" (" attr(href) ")";font-size:8.5pt;color:#4A5058;
    word-break:break-all}
  .lnk[href^="mailto:"]::after{content:""}
  video,.videowrap{display:none !important}
  .limits li{break-inside:avoid}
}

/* ---- substrate: sparse grid + protected reading fields + motif family ---- */
:root{
--motif-circuit:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20720%20640%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%23242931%22%20stroke-opacity%3D%22.035%22%3E%3Cpath%20d%3D%22M32%2084H224M32%20164H144M510%2076H688M552%20564H688%22%2F%3E%3Cpath%20d%3D%22M84%2032V210M646%2032V196M666%20420V608%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23F0793C%22%20stroke-opacity%3D%22.052%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M420%2074h82l24%2024h126v70l-26%2026v92h-64l-22%2022h-92%22%2F%3E%3Cpath%20d%3D%22M688%20232h-74l-28%2028h-96l-26%2026v116l34%2034h110%22%2F%3E%3Cpath%20d%3D%22M346%20522h92l18-18h82l26%2026h124%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23737A85%22%20stroke-opacity%3D%22.038%22%20stroke-width%3D%221.2%22%3E%3Cpath%20d%3D%22M410%20120h18v28h18v-28h24v28h20v-28h28v28h20%22%2F%3E%3Crect%20x%3D%22532%22%20y%3D%22322%22%20width%3D%2278%22%20height%3D%2246%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M542%20314v-12m16%2012v-12m16%2012v-12m16%2012v-12m16%2012v-12M542%20376v12m16-12v12m16-12v12m16-12v12m16-12v12%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F0793C%22%20fill-opacity%3D%22.078%22%3E%3Ccircle%20cx%3D%22502%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22652%22%20cy%3D%2298%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22586%22%20cy%3D%22260%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22464%22%20cy%3D%22286%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22498%22%20cy%3D%22436%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22564%22%20cy%3D%22530%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22626%22%20cy%3D%22194%22%20r%3D%224%22%20fill%3D%22%23F0793C%22%20fill-opacity%3D%22.095%22%2F%3E%3C%2Fsvg%3E");
--motif-robot:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20720%20640%22%3E%3Cg%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%23333942%22%20stroke-opacity%3D%22.04%22%3E%3Cpath%20d%3D%22M58%20530H684M108%2090V566%22%2F%3E%3Cpath%20d%3D%22M108%20530A422%20422%200%200%201%20530%20108%22%20stroke-dasharray%3D%225%2010%22%2F%3E%3Cpath%20d%3D%22M108%20530A310%20310%200%200%201%20418%20220%22%20stroke-dasharray%3D%223%2012%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23F0793C%22%20stroke-opacity%3D%22.052%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M108%20530L108%20412L244%20324L388%20372L520%20220%22%2F%3E%3Cpath%20d%3D%22M520%20220l66-24%2018%2024-68%2044z%22%2F%3E%3Cpath%20d%3D%22M80%20530h56v34H80z%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23737A85%22%20stroke-opacity%3D%22.04%22%3E%3Cpath%20d%3D%22M108%20412a118%20118%200%200%201%2070-109M244%20324a92%2092%200%200%201%20101%208M388%20372a126%20126%200%200%201%2036-96%22%2F%3E%3Cpath%20d%3D%22M520%20220C592%20318%20626%20412%20630%20540%22%20stroke-dasharray%3D%224%209%22%2F%3E%3Cpath%20d%3D%22M520%20220C486%20150%20424%20112%20344%20100%22%20stroke-dasharray%3D%224%209%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%230D0F12%22%20stroke%3D%22%23F0793C%22%20stroke-opacity%3D%22.082%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%22412%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22244%22%20cy%3D%22324%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22388%22%20cy%3D%22372%22%20r%3D%228%22%2F%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%22220%22%20r%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23737A85%22%20stroke-opacity%3D%22.052%22%3E%3Cpath%20d%3D%22M630%20540h32m-16-16v32M344%20100h32m-16-16v32%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22520%22%20cy%3D%22220%22%20r%3D%223%22%20fill%3D%22%23F0793C%22%20fill-opacity%3D%22.095%22%2F%3E%3C%2Fsvg%3E");
--motif-vision:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20720%20640%22%3E%3Cg%20fill%3D%22none%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%23333942%22%20stroke-opacity%3D%22.048%22%20stroke-width%3D%221.4%22%3E%3Cpath%20d%3D%22M62%20122h70M62%20122v70M302%20122h-70M302%20122v70M62%20454h70M62%20454v-70M302%20454h-70M302%20454v-70%22%2F%3E%3Cpath%20d%3D%22M418%20176h54M418%20176v54M662%20176h-54M662%20176v54M418%20510h54M418%20510v-54M662%20510h-54M662%20510v-54%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23737A85%22%20stroke-opacity%3D%22.032%22%3E%3Cpath%20d%3D%22M88%20190L642%20236M88%20252L642%20286M88%20316L642%20338M88%20382L642%20390%22%2F%3E%3Cpath%20d%3D%22M176%20122L508%20510M242%20122L578%20510%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23F0793C%22%20stroke-opacity%3D%22.036%22%3E%3Cpath%20d%3D%22M126%20214L476%20258M212%20276L562%20318M158%20358L518%20402M264%20404L608%20448%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F0793C%22%20fill-opacity%3D%22.074%22%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%22214%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22476%22%20cy%3D%22258%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22212%22%20cy%3D%22276%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22562%22%20cy%3D%22318%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%22358%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22518%22%20cy%3D%22402%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22264%22%20cy%3D%22404%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22608%22%20cy%3D%22448%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23737A85%22%20fill-opacity%3D%22.055%22%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22330%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22286%22%20cy%3D%22186%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22448%22%20cy%3D%22352%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22632%22%20cy%3D%22274%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22608%22%20cy%3D%22448%22%20r%3D%224%22%20fill%3D%22%23F0793C%22%20fill-opacity%3D%22.098%22%2F%3E%3C%2Fsvg%3E");
}
body{
background-color:var(--bg);
background-image:
linear-gradient(rgba(36,41,49,.020) 1px,transparent 1px),
linear-gradient(90deg,rgba(36,41,49,.020) 1px,transparent 1px),
linear-gradient(rgba(51,57,66,.030) 1px,transparent 1px),
linear-gradient(90deg,rgba(51,57,66,.030) 1px,transparent 1px);
background-size:64px 64px,64px 64px,256px 256px,256px 256px;
background-attachment:fixed;
}
.view{position:relative;isolation:isolate}
.view::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-repeat:no-repeat;
}
#v-home::before{
background-image:var(--motif-circuit),var(--motif-robot);
background-position:right -120px top 26px,left -250px bottom 380px;
background-size:760px auto,620px auto;
}
#v-inv::before{background-image:var(--motif-circuit);background-position:right -150px top 180px;background-size:780px auto}
#v-seg::before{background-image:var(--motif-vision);background-position:right -140px top 240px;background-size:790px auto}
#v-robo::before{background-image:var(--motif-robot);background-position:right -130px top 210px;background-size:780px auto}
#v-eco::before{background-image:var(--motif-circuit);background-position:left -260px top 680px;background-size:760px auto}
#v-man::before{
background-image:var(--motif-robot),var(--motif-vision);
background-position:right -180px top 180px,left -250px bottom 360px;
background-size:760px auto,680px auto;
}
header{background:var(--bg)}
.herotext,.sech,.about,.sechelp,.sk,.job,.other,.contact,
.back,.phead,.pbody>.blk,.view main.wrap>.blk,.view main.wrap>p,.nextp,footer{background-color:var(--bg)}
.pcard,.facts,.cdet,.meta,.callout,.codewrap,.videowrap,.vslot,.pfpslot{background-color:var(--panel)}
@media (max-width:820px){
.view::before{display:none}
}